Zi 字媒體
2017-07-25T20:27:27+00:00
此篇文章瀏覽量：
272
相信會寫CSS的同好們，一定對CSS不陌生，但box model在CSS的角色裡扮演著非常垂要的地位，如果你是初學者，務必搞懂：全部的html元素，都是box model概念。學會之後，未來在css對html的調效中，都將非常有幫助。
box model圖示：
所有的html標籤裡除了內文之外，都還包含了padding(內距)、border(邊框)、邊距(margin)。
另外值得注意的：
一、css裡的width屬性指的是包含了哪部份：僅包含段落(即白色區域)。所以其實整個元素的總寬度=width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
二、當兩個html元素碰在一起時，邊距該如何算呢：
.para{
border:50px solid black;
width:50px;
padding:50px;
margin:50px;
}
段落1
段落2
以上html及css原始碼顯示結果如下圖：會發現上下兩個的margin會被合併成只有50px，而不是100px。事實上是會取較大一個margin數值。
但如果將.para這個css改成以下：
.para{
border:50px solid black;
width:50px;
padding:50px;
margin:50px;
display:inline-block;
}
即將.para兩個元素改成行內區塊(display:inline-block;)元素，顯示結果如下：中間的margin會變成100px(50px + 50px)，瞭解其差異性了嗎？
三、行內元素(例：)：如果是行內元素(display:inline;)，設定margin-top、margin-bottom、padding-top、padding-bottom會無效。後續會另開專文撰寫關於display屬性。
若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。
Facebook
Twitter
寫了
5860316篇文章，獲得
23313次喜歡