深入css中的margin

2022-02-18 11:03:21 字數 1246 閱讀 7577

深入css中的margin

第一：margin-top

css**（元素沒有任何定位的情況下，並且元素預設為block）

html


<


div 


class


="outer"


>


<


div 


class


="inner"


>


div>


div>


效果：（原因，div預設的是我們塊級元素，它是獨佔一行的，當margin-top的時候，整個行，都會移動，再看看我們margin-left 就會明白了）ps：如果元素浮動起來情況又不一樣了


接下來我們將inner元素display改成inline-block後看效果；


第二：關於margin-right


css：


/*


我們的div預設的是塊級別元素；


它會獨佔一行，


所以當我們設定它的margin-right是沒有效果的； */


.outer


效果：原地不動，也就是我們的margin-right沒效果；（原因：還是因為它是塊級別元素，會占領整個一行）


第三：margin-left


css
.outer.inner
html


<


div 


class


="outer"


>


<


div 


class


="inner"


>


div>


div>


效果：


關於margin，


我們還得看具體的情況，塊級元素，內聯元素，塊級-內聯元素又是不一樣的情況了，


還有我們元素是否浮動情況滴呀；
 
css中margin為負數的深入研究
注 以下實驗的元素均為塊級元素，inline block和inline本身對margin某些方向上都是無效的，所以這裡不予討論。當塊元素width auto時，margin left和margin right會增加元素的寬度 當有具體width時，margin left向左移動,margin rig...


css中的預設margin
上班打醬油中，body的margin為8px webkit預設行高18px height18px 預設font size16px p預設margin是16px 0 16px 0 ul和ol有預設的margin left 40px的padding left和16px 0 16px 0 button有2...


css中的預設margin
上班打醬油中，body的margin為8px webkit預設行高18px height18px 預設font size16px p預設margin是16px 0 16px 0 ul和ol有預設的margin left 40px的padding left和16px 0 16px 0 button有2...