簡單的CSS疊加外邊距示例
segmentfault 發(fā)布時間：2015-07-21 16:36:51 作者：trigkit4 
我要評論
我要評論這篇文章主要介紹了簡單的CSS疊加外邊距示例,是文檔樣式編寫中一個需要注意的地方,需要的朋友可以參考下
垂直方向上的外邊距會疊加，假設有3個段落，前后相接，而且都應用以下規(guī)則：
CSS Code復制內(nèi)容到剪貼板
- <style type="text/css">
- p{
- color: black;
- background: #ccc;
- margin-top: 50px;
- margin-bottom: 30px;
- height: 50px;
- border: 1px solid red;
- }
- </style>
第一段的下外邊距與第二段的上外邊距相鄰，你可能認為它們之間的外邊距是80px，但實際的間距卻是50px。像這樣的上下外邊距相遇時，它們就會相互重疊，直至一個外邊距碰到另一個元素的邊框。因此，在這里，第二段較寬的上外邊距就會碰到第一段的邊框。也就是說，較寬的外邊距決定兩個元素最終離多遠。這個過程就是外邊距疊加。
相關(guān)文章
這篇文章主要介紹了解決margin 外邊距合并問題 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-03- 這篇文章主要介紹了詳解CSS外邊距折疊引發(fā)的問題的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-27
外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下2018-10-30- 本篇文章主要介紹了詳解css邊距重疊的幾種解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-06
css控制邊界與邊框示例(內(nèi)邊距、外邊距使用方法)
這篇文章主要介紹了css控制邊界與邊框示例,需要的朋友可以參考下2014-04-15- 今天就先說說CSS的外邊距吧。 圍繞在元素邊框的空白區(qū)域是外邊距。這是W3CSchool給我們的解釋。這句話看起來很模糊，說的不是那么明確2012-05-27
- 空白雙邊距是一個極容易誤解的CSS特性.它不是CSS的bug,但如果我們一旦誤解,將會給你帶來很多麻煩.2010-07-04
- 網(wǎng)頁制作Webjx文章簡介：今天談談CSS外邊距疊加的問題，邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。 在進行CSS網(wǎng)頁布局時會遇到2009-04-02
這篇文章主要介紹了CSS 外邊距(margin)重疊及防止方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-14
