保持等边距CSS的最佳方法

Question

我正在开发一个响应式网格，并试图在每个分辨率下保持 主 div 的所有四个边的边距相同。我已经在主 div 上设置了 margin 0 auto ，它在左右两边保持相等，但是顶部和底部呢？

<div id = "wrapper">
<header id = "header"> <p> this is the header</p></header>
<div id = "main">
    <div id = "" class = "col col3">
        <div class = "img-col"><img src = "images/image.png"></div>
        <div class = "text-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel eros libero. Fusce id semper orci. Morbi      imperdiet sit amet elit vel consectetur. Nam suscipit sem blandit est consectetur iaculis. Vestibulum sed dolor elementum, viverra sapien id, sollicitudin nibh. Integer quis venenatis ligula.Nam suscipit sem blandit est consectetur iaculis.</p>
        </div>
    </div>

    <div id = "" class = "col col1">
        <div class = "img-col"><img src = "images/image.png"></div>
        <div class = "text-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel eros libero. Fusce id semper orci. Morbi imperdiet sit amet elit vel consectetur. Nam suscipit sem blandit est consectetur iaculis.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel eros libero.Lorem ipsum dolor sit amet,. </p>
    </div>
    </div> 

</div>

#main { 
    width:90%;
    margin:0 auto;
}

.col { 
    float:left;
    margin: 1% 0px 1% 1.6%;
    background-color:#FF0000;   
}

Answer 1

编辑澄清后。

如果您需要在#main div 周围所有四个边上的边距相同（上/下/左/右），您必须：

1. 清除浮动内容，使其不会溢出#main 上设置的底部边距，您可以使用伪元素:after 和clear:both;（参见演示）
2. 在#main div 上设置margin:10%;。 Ass 百分比边距是根据容器宽度计算的，所有四边距将具有相同的值。

DEMO（带有一些额外的样式，以便您可以看到边距）

这是一个屏幕截图，显示四个边的边距值相同：

---

原答案：

百分比边距是根据容器宽度计算的，因此如果您在 .col 上设置 margin:1%;，则顶部、右侧、底部和左侧的边距将相同。

Demo