考慮到邊緣崩潰，如何在父元素內均勻地分隔子元素？

因此，如果沒有邊框，margin collapsing會導致孩子的邊距崩潰到父母的邊距。那麼，我可以做到這一點？考慮到邊緣崩潰，如何在父元素內均勻地分隔子元素？

------------- 
|   | <-- "Top space" 
| ------- | 
| |  | | 
| |  | | 
| ------- | 
|   | <-- "Middle space" 
| ------- | 
| |  | | 
| |  | | 
| ------- | 
|   | <-- "Middle space" 
| ------- | 
| |  | | 
| |  | | 
| ------- | 
|   | <-- "Bottom space" 
------------- 
^  ^
left  right 
space space

我希望所有這些「空格」相等。

我想讓每個孩子之間的空間爲10px，孩子與父母之間的空間爲10px。如果每個孩子的保證金爲10px，並且父母沒有填充，則「頂部空間」和「底部空間」將爲0px。如果父母中有任何填充，「中間空間」將與頂部/底部空間不同。

我該怎麼做？我並不是特別想要浮動或清除任何元素，或者甚至添加新元素來完成此操作。我只是覺得我在這裏錯過了一些聰明的數學。

來源

2011-02-24 Oliver Zheng

這是最簡單的方法：

只需添加一個透明border到包含元素。

Live Demo

HTML：

<div id="container"> 
    <div class="square"></div> 
    <div class="square"></div> 
    <div class="square"></div> 
</div>

CSS：

#container { 
    background: #ccc; 
    width: 200px; 
    border: 1px solid transparent /* "magic border" fixes it */ 
} 
.square { 
    margin: 10px; 
    height: 50px; 
    background: #f0f 
}

或者，你可以使用position: absolute：

Live Demo

來源

2011-02-24 21:45:42 thirtydot

一些網站說，透明的邊框顏色在IE6中不起作用。它甚至看起來像什麼？我甚至沒有使用IE6的機器了。 – 2011-02-25 00:57:22

這將是IE6中的黑色邊框。我不認爲我的答案是IE6（除非特別要求），因爲瀏覽器現在已經很老了。你可以在這裏查看：http://ipinfo.info/netrenderer/ - 帶有URL http://fiddle.jshell.net/XB9wX/2/show/light/ – thirtydot 2011-02-25 00:59:35

另一種解決方案是容器上的「padding：1px」： http://jsfiddle.net/XB9wX/3/現在你有3種不同的解決方案，希望你可以使用其中的一種:) – thirtydot 2011-02-25 01:00:39

您可以給子元素10px的邊距，然後填充10px的父元素。伊利諾伊州代碼它

編輯：

關於使用邊界如何？ - 無
父 - display:table;

HTML：

<div> 
    <p>Alex</p> 
    <p>James</p> 
    <p>thomas</p> 
</div>

CSS：

div{display:table;} 
p{margin:10px;}

http://jsfiddle.net/nqLYT/

來源

2011-02-24 20:55:47 Alex

那不是給他的孩子們之間的20像素的空間？ – 2011-02-24 20:57:07

看到我編輯的答案。 – Alex 2011-02-24 21:05:09

有一個堅實的邊界是相當有限的。如果我在父母元素中有背景圖片怎麼辦？ – 2011-02-24 21:08:02

我會嘗試

.children{ 
margin: 5px; 
} 

.parent{ 
padding: 5px; 
}

這應該是所有方向10px。對？

來源

2011-02-24 20:56:15

不可以。不會。孩子們的利潤會崩潰，因此每個孩子之間的空間將會是'5px'。 – 2011-02-24 21:05:14

考慮到邊緣崩潰，如何在父元素內均勻地分隔子元素？

回答

相關問題