关于设置外边距的一个问题

能不能设置一个元素的外边距，等于它的兄弟元素的外边距?

例如以下两种：

这个可以做到？

同时设置两个元素的样式就好了，用逗号,分割

        <style>
         div{
            width: 100px;
            height: 100px;
        }
        .div1,.div2{
            margin: 10px;
        }
        </style>

        <div class="div1">div1</div>
        <div class="div2">div2</div>

设置相同类名就行了

可以研究一下margin本身的一些潜在规则，
要实现上述需要，首先一个问题是找兄弟元素，这个兄弟选择器~可以帮到你；
第二个问题是块元素间的垂直margin是会重叠的，会导致margin比你想要的效果短了一半。

这里有一个博客详细讲解了margin的重叠机制及其解决方法，强烈推荐看一下。

然后我这里有一个实例，可供参考：

 <div id="container">
    <div class="demo-box">box1</div>
    <div>box2</div>
 </div>

#container {
  overflow: auto;
}
.demo-box,
.demo-box ~ div {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}
.demo-box ~ div {
  clear: left;
}

效果如下：

如果对你有用，还请动动小手点一下采纳啦