版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
能用padding就不用margin
<style>
*{
margin: 0px;
padding: 0px;
}
span{
margin-left: 50px;
margin-top: 50px;
margin-bottom: 20px;
}
a{
margin-top: 30px;
}
tr,tbody{
padding: 20px;
}
.box1{
width: 200px;
height: 200px;
background: green;
margin-bottom: 50px;
}
.box2{
width: 200px;
height: 200px;
background: green;
margin-top: 50px;
}
.box{
width: 200px;
height: 200px;
background: #008000;
padding-left: 30px; /* 只能设置背景的颜色和背景图片,margin不能 */
}
</style>
</head>
<body>
<script type="text/javascript">
tr,tbody:在表格中设置padding无效果
padding:
只能设置背景的颜色和背景图片,margin不能
margin:
1.在行内标签中,上下margin无效
解决方法:1)加浮动,
脱离文档流需要考虑的问题,当盒子够大会在同一行,减小盒宽
清除给下面标签的浮动影响clear
2)display更改标签类型为块级或者行列块
2.在块级标签里,使用上下margin,上下margin会重合
解决方法:1)加浮动
3.如果第一个子标签使用了margin-top,子标签会把margin传递给父级,父级会撑开
</script>
<div class="box">可靠可爱可以可算</div>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>张三</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
</tr>
</tbody>
</table>
<span>span的margin列举</span><!-- 行列标签 -->
<a href="#">超链接的margin列举</a>
<div class="box1"></div>
<div class="box2"></div>
</body>