4、块级元素与行级元素宽度和高度的区别
案例
<html>
<head>
<style type="text/css">
.special{
border: 1px solid#036;
width: 200px;
height: 50px;
background: #ccc;
margin: 5px;
display: block;
}
</style>
</head><body>
<div class="special">这是div元素</div>
<span class="special">这是span元素</span>
</body>
</html>
5、盒子的margin叠加问题
padding只存在于一个盒子内部，所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。margin则用于调整不同盒子之间的位置关系，因此要对margin在不同情况下的性质有非常深入的了解。
（1）行级元素之间的水平margin叠加
当两个行级元素紧邻时，元素之间水平margin不会叠加，它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。
案例
<html>
<head>
<meta charset="utf-8">
<title>两个行级元素的margin</title>
<style type="text/css">
span{
background-color: #a2d2ff;
text-align: center;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
padding: 10px;
}
span.left{
margin-right: 30px;
background-color: #a9d6ff;
}
span.right{
margin-left: 40px;
background-color: #eeb0b0;
}
</style>
</head><body>
</body>
<span class="left">行级元素1</span><span class="right">行级元素2</span>
</html>
从执行结果来看，两个行级元素之间的距离为30px+40px+70px。
（2）块级元素之间的垂直margin叠加
块级元素之间的垂直margin叠加是指当两个块级元素的外边距垂直相遇时，它们将形成一个外边距。叠加后的外边距高度等于两个发生叠加的外边距的高度中的较大者。
案例
<html>
<head>
<meta charset="utf-8">
<title>两个块级元素的margin</title>
<style type="text/css">
<!--
div{
background-color: #a2d2ff;
text-align: center;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
padding: 10px;
}
--!>
</style>
</head><body>
<div style="margin-bottom: 50px;">块元素1</div>
<div style="margin-top: 30px;">块元素2</div>
</body>
</html>
2667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
