如何在不影响父div的情况下对子div应用保证金？

Question

我正在尝试将保证金应用于特定子div 2 * “＃child2” *，但它也将余量应用于父div。问题是保证金崩溃。

<div id="parent">
  <div id="child1" class="child">hello1</div>
  <div id="child2" class="child">hello1</div>
  <div id="child3" class="child">hello1</div>
</div>

CSS

#parent{
  overflow:auto;
  padding-top: -1px;
  margin-top: 1px;
}
.child{
  margin:0 30px;
  display:inline-block;
  background-color: #5395ce;
  padding: 5px;
}
#parent{
  background-color: #000;
}
#child2{
  margin-top: 15px;
}

以下是代码：http://jsbin.com/nibaw/5/edit?html,css,output

Answer 1

定义 您的 .child班级vertical-align:top;

.child{
vertical-align:top;
}

Answer 2

摆脱

#child2 {
  margin-top: 15px;
}

增加15px的上边距。