使用CSS來消除你的邊距和邊界

今天的網絡瀏覽器已經走過了瘋狂的日子,任何一種跨瀏覽器一致性都是一廂情願的想法。 今天的網頁瀏覽器都非常符合標準。 他們在一起很好地發揮作用,並在各種瀏覽器中提供相當一致的頁面顯示。 這包括最新版本的Google Chrome,Microsoft Edge,Mozilla Firefox,Opera,Safari以及當今用於訪問網站的無數移動設備上的各種瀏覽器。

雖然在網絡瀏覽器和它們如何顯示CSS方面已經取得了進展,但這些不同的軟件選項仍然存在不一致之處。 常見的不一致之處在於這些瀏覽器默認情況下如何計算邊距,填充和邊框。

由於盒子模型的這些方面會影響所有HTML元素,並且由於它們對於創建頁面佈局非常重要,所以不一致的顯示意味著一個頁面在一個瀏覽器中可能看起來很棒,但在另一個瀏覽器中稍微偏離。 為了解決這個問題,許多網頁設計師規範了盒子模型的這些方面。 這種做法也被稱為“歸零”邊距,填充和邊框的值。

關於瀏覽器默認值的說明

Web瀏覽器都有默認設置,用於頁面的某些顯示方面。 例如,超鏈接默認為藍色並帶下劃線。 這在各種瀏覽器中都是一致的,儘管大多數設計人員為了適應他們特定項目的設計需求而進行了更改,但事實上他們都以相同的默認值開始,這使得更容易進行這些更改。 令人遺憾的是,邊距,填充和邊框的默認值不能享受相同級別的跨瀏覽器一致性。

標準化邊距和填充值

解決盒子模型不一致問題的最好方法是將HTML元素的所有邊距和填充值設置為零。 有幾種方法可以做到這一點,即將CSS規則添加到樣式表中:

* {margin:0; 填充:0; }

這個CSS規則使用*或通配符。 該字符意味著“所有元素”,並且它基本上會選擇每個HTML元素並將邊距和填充設置為0.即使此規則非常不明確,因為它在您的外部樣式表中,它將比默認瀏覽器具有更高的特異性值做。 由於這些默認值就是你正在覆蓋的東西,所以這種風格將會完成你正在設定的任務。

另一種選擇是將這些值應用於HTML和body元素。 因為頁面上的所有其他元素都是這兩個元素的子元素,CSS級聯應將這些值應用於所有其他元素。

html,body {margin:0; 填充:0; }

這將在所有瀏覽器的相同位置開始您的設計,但有一點需要記住的是,只要您關閉了所有邊距和填充,您就需要選擇性地將它們重新打開以用於網頁的特定部分以實現外觀並覺得你的設計要求。

國界

你可能會想“但默認情況下沒有瀏覽器在body元素周圍有一個邊框”。 這不完全正確。 較舊版本的Internet Explorer在元素周圍有一個透明或不可見的邊框。 除非將邊框設置為0,否則該邊框可能會弄亂您的頁面佈局。 如果您已決定繼續支持這些過時的IE版本,則需要將以下內容添加到您的正文和HTML樣式中:

HTML,body {
margin:0px;
padding:0px;
border:0px;
}

與您如何關閉邊距和填充類似,這種新樣式也會關閉默認邊框。 您也可以使用本文前面顯示的通配符選擇器來做同樣的事情。

Jennifer Krynin的原創文章。 由傑里米吉拉德在9/27/16編輯。