鍍金池/ 問答/HTML/ 塊狀元素設(shè)定寬度之后，依然占據(jù)一整行，剩余的部分是margin嗎？

塊狀元素設(shè)定寬度之后，依然占據(jù)一整行，剩余的部分是margin嗎？

塊狀元素設(shè)定寬度之后，依然占據(jù)一整行，剩余的部分是margin嗎

回答
編輯回答
局外人

塊級元素一定會填充滿它的父級元素。一個(gè)塊級元素由 margin、border-box、padding-box 、content-box嵌套而成。

如果你將塊級元素的 box-sizing 屬性設(shè)置為 content-box ,那么你的寬度指的是 content-box ，除去 content-box 以外的其余各部分都有可能補(bǔ)足 content-box 與父元素的空余，具體要看你對于其余各部分的寬度設(shè)定，默認(rèn)是以 margin 補(bǔ)足。

如果你將塊級元素的 box-sizing 屬性設(shè)置為 border-box,那么你的寬度指的是 border-box,去除 border-box 以及其包含的 content-box 與 padding-box，剩下的只有 margin 了，所以此種情況下剩余部分一定是 margin。

box-sizing 這個(gè)屬性有時(shí)會有不同的默認(rèn)值。

2017年5月15日 23:41
編輯回答
短嘆

是的。
margin、padding、內(nèi)容和border。
clipboard.png

一個(gè)處在正常文檔流中的塊級元素，其寬度是由七個(gè)部分共同決定的?？梢苑Q為塊級元素的水平“七屬性”，它們分別是：

margin-left + 
border-left + 
padding-left + 
width + 
padding-right + 
border-right + 
margin-right

你設(shè)置了寬度就剩下margin了。

2018年8月3日 21:11
編輯回答
心上人

是的，看下圖
圖片描述

2018年4月21日 22:03
編輯回答
尐懶貓

首先樓上那位仁兄你看東西真的只看一點(diǎn)的……你看到上邊的display定義了沒有？
首先，這個(gè)display決定了很多的默認(rèn)樣式，這一點(diǎn)一定要搞清楚
@xsf_1991 的盒子模型是很對，但更多的你要搞清楚，它是不是按照瀏覽器的默認(rèn)樣式去處理了

2018年5月16日 19:38