如何在子div上創建等間距的div容器

我想創建一個包含其他div的div，就像一些小菜單。我希望內部div和容器之間的間距在各方面都相同。我該怎麼做呢？到目前爲止，我有這樣的：如何在子div上創建等間距的div容器

<html> 
<head> 
<style type="text/css"> 
    .container { 
     padding: 5px; 
     background-color: rgba(0,127,255,.5); 
    } 
    .child { 
     margin-top: 5px; 
     background-color: rgba(255,127,0,.5); 
    } 
</style> 
</head> 
<body> 
<div class="container"> 
    <div class="child">Foo</div> 
    <div class="child">Bar</div> 
    <div class="child">Gaz</div> 
    <div class="child">Waka</div> 
</div> 
</body> 
</html>

的問題是，這留下的頂級元素和容器，但只有底部元件與容器之間的5px的空間之間的10px的空間。當我從容器中刪除頂部填充時，容器頂部和第一個元素之間有0px的空間。我怎樣才能讓這個空間變得四面八方？

更新：

一種解決方案是從容器中取出頂部填充，並設置其顯示內聯塊和寬度設定爲100％，並且html和體具有0餘量和填充。但是，這會使孩子們與窗戶的右側齊平，並且沒有正確的填充。如何通過均勻間隔和填充以及容器與窗戶側面齊平來實現這一點？

<html class="page"> 
<head> 
<style type="text/css"> 
    html,body { 
     padding: 0px; 
     margin: 0px; 
    } 
    .container { 
     display: inline-block; 
     width: 100%; 
     padding-left: 5px; 
     padding-right: 5px; 
     padding-bottom: 5px; 
     background-color: rgba(0,127,255,.5); 
    } 
    .child { 
     margin-top: 5px; 
     background-color: rgba(255,127,0,.5); 
    } 
</style> 
</head> 
<body> 
<div class="container"> 
    <div class="child">Foo</div> 
    <div class="child">Bar</div> 
    <div class="child">Gaz</div> 
    <div class="child">Waka</div> 
</div> 
</body> 
</html>

來源

2014-09-06 David Williams

你爲什麼不取消第一個孩子的保證金？

這樣的：

.child:first-child {margin:0;}

http://jsfiddle.net/vfcjwqy7/

來源

2014-09-06 16:23:07

謝謝，這確實它。 JSG也提出了這個建議。這個CSS很好地工作，'html，body {margin：0px;};}} \t \t \t padding：0px; \t \t} \t \t .container { \t \t \t填充：5像素; \t \t \t background-color：rgba（0,127,255，.5）; \t \t} \t \t .child { \t \t \t邊距：5px的; \t \t \t background-color：rgba（255,127,0，.5）; \t \t} \t \t .child：第一胎{ \t \t邊距：0; \t \t}'再次感謝。 – 2014-09-06 16:45:24

以下內容添加到你的CSS：

.child:first-child{ 
    margin-top:0; 
}

應該移除的第一個元素距頂部。

來源

2014-09-06 16:21:51 jagmitg

用下面簡單的CSS代碼：

.child { 
/* margin-top: 5px; */ 
background-color: rgba(255,127,0,.5); 
padding: 10px 0; 
border: 1px solid blue; 
}

來源

2014-09-06 16:40:24 universe

另一種方法是使用adjacent siblings：

.child { background-color: rgba(255,127,0,.5); } 
.child + .child { margin-top: 5px; }

來源

2014-09-06 16:50:24

如何在子div上創建等間距的div容器

回答

相關問題