保持相等邊距的最佳方式CSS

我正在使用響應式網格，並且我試圖在每個分辨率下保持主div的所有四個邊上的邊距相同。我已經把margin 0自動放在主div上，它保證它在右邊和左邊相等，但頂部和底部呢？保持相等邊距的最佳方式CSS

<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; 
}

來源

2014-05-21 user3541612

究竟是這裏的「內容」..？包裹，標題等的大小是什麼？這是整個CSS ..？ –

對不起，內容是主要的div，所以在標題下面，我希望邊緣與側邊相同，並在主div下面 – user3541612

編輯澄清之後。

如果您需要在四個方面的同裕（上/下/左/右）圍繞#main DIV，你必須：

clearfix浮動的內容，以便它不」 t溢出設置在#main的底部邊距，可以使用和clear:both;（請參見演示）中的僞元素
設置margin:10%;上的#main div。驢的百分比利潤率是根據集裝箱寬度計算的，所有的利潤率都將具有相同的價值。

DEMO（有一些額外的造型，所以你可以看到邊緣）

，這裏是一個截屏顯示，保證金的值是四邊相同：

same margin on all four sides

原來的答覆：

根據容器寬度計算邊際利潤百分比，因此如果您在.col上設置了margin:1%;，則頂部，右側，底部和左側的邊距將保持不變。

Demo

來源

2014-05-21 09:03:43

你的演示並不是將所有分辨率的內容垂直居中正如我所看到的那樣...... –

@TJ OP指出：*「我試圖保持所有四邊的邊緣不變」*並且不涉及垂直對齊。我的回答爲此提供了一個解決方案 –

「我已將margin 0自動放在主div上，它保證它在右側和左側保持相等，但頂部和底部的情況如何」，很明顯op正試圖對齊內容與未知的高度... –

保持相等邊距的最佳方式CSS

回答

相關問題