談談CSS的邊距合并之我的理解

來源:互聯網
上載者:User

  今天通過和一些師弟的交流,發現他們對外邊距合并不是很理解。

  其實淺析CSS的外邊距合并的話,是很容易明白是怎麼一回事兒的。但是如果想要深入瞭解margin這個神奇的屬性,那可得費一番功夫了。

  我是一個菜鳥,在這裡當然不會解釋得太複雜,在這裡我只是想談談我對外邊距合并的理解。

  其實要理解清楚什麼是外邊距合并,最簡單的方法就是自己動手試試。我認為,理解外邊距合并的關鍵就在於理解這句話:“只要接觸,就合并”。

  什麼叫“只要接觸,就合并”呢?其實理解起來就是:當兩個元素的外邊距相接觸,它們就融合了。什麼時候就能接觸呢?就是當兩個元素都沒有邊框屬性和內邊距屬性。

  還是聽不懂?那就不是我所力所能及的範疇了。因為你沒有理解什麼是盒模型了。

  其實CSS的外邊距合并就是這麼一點點東西。我拿出來講是因為,看了好多人的代碼,都喜歡把margin和padding混在一起。不管用的是 padding還是margin,只要最終顯示效果和自己想象的一致,他們覺得就達到目的了。有時候用margin,遇到了邊距合并卻不知道怎麼回事,或者說不知道怎麼解決,然後就想出各種法子“製造”自己想要的效果(例如加多一個空元素撐開留白)。但是其實我想說,這樣使用margin和 padding,根本就不是W3C制定padding和margin時候的本意。

  好吧,小小地吐槽了一下,也不想說多什麼東西,因為別人寫的比我更深入更細緻。這裡給幾篇文章的地址,有助於大家加深對margin和padding使用的理解。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.