用margin还是用padding？—— 负margin实战
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用margin还是用padding？—— 负margin实战相关的知识，希望对你有一定的参考价值。
看过一篇文章是关于我知道你不知道的负Margin，里面对margin做了总结：
当margin四个值都为正数值的话，那么margin按照正常逻辑同周围元素产生边距。当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。
接下来就讲在实际开发中用到的几个比较常用的负margin实例：
1、bootstrap框架的栅格系统是一个亮点，它就用了负margin来完美的解决了container 和 row 之间的外边距问题，具体实现如下
其中，container设置了水平方向上的padding，使其内部内容不会接触到浏览器的边界，大小为15px，就是图片中粉红色的部分；特别注意里面嵌套的row有一个特殊的地方，就是左右各有-15px的margin，就是图片中的蓝色部分，这样就抵消了container的水平方向的15px的padding，千万记住要把row放到container的内部，这样才能保证正常。
2、多列等高布局——使用正padding和负margin对冲实现多列布局方法
这个方法就是，在所有列中使用正的上下padding，和负的上下margin，并在所有列外面加上一个容器，并设置overflow:hidden把溢出背景切掉。
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <style type="text/css"> 5 * { 6 margin:0; 7 padding:0; 8 border:0; 9 } 10 11 #container { 12 margin: 0 auto; 13 overflow: hidden; 14 width: 960px; 15 } 16 17 .column { 18 background: #ccc; 19 float: left; 20 width: 200px; 21 margin-right: 5px; 22 margin-bottom: -99999px; 23 padding-bottom: 99999px; 24 } 25 26 #content { 27 background: #eee; 28 } 29 30 #right { 31 float: right; 32 margin-right: 0; 33 } 34 35 </style> 36 </head> 37 38 <body> 39 40 <div id="container" > 41 <div id="left" class="column aside" > 42 <p>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br></p> 43 </div> 44 <div id="content" class="column section" > 45 <p>Main content </p> 46 </div> 47 <div id="right" class="column aside" > 48 <p>Sidebar</p> 49 </div> 50 </div> 51 52 </body> 53 </html>
以上是关于用margin还是用padding？—— 负margin实战的主要内容，如果未能解决你的问题，请参考以下文章