div+css[四]：css中边界属性margin

div+css[4]：css中边界属性margin

1.边界属性margin

margin:auto|长度值|百分比值;

□ 单侧的边界和简写

margin-top:5px;

同时定义四个单侧的属性,顺序遵循"钟面原则上右下左":

margin:margin-top|margin-right|margin-bottom|margin-left;

margin:40px 30px 20px 10px;

□ 垂直方向的边界重叠

例如两元素:content1 content2

<div class="content1"></div>

<div class="content2"></div>

?

两元素分别定义为:

.content1{

margin-bottom:50px;

height:50px;

width:300px;

background:#cccccc;

}

.content2{

margin-top:50px;

height:50px;

width:300px;

background:#cccccc;

}

实际显示效果是:两个元素之间的距离为50px,而不是两个边界之和为100px.也就是说,两个元素的边界发生了重叠.当两个边界值不同时,元素间的距离等于值较大的一个.

?

□ 水平方向的边界重叠

?

例如两元素:content1 content2

?

两元素分别定义为:

<div class="content1"></div>

<div class="content2"></div>

?

.content1{

margin-right:50px;

height:50px;

width:300px;

background:#cccccc;

float:left;

}

.content2{

margin-left:50px;

height:50px;

width:300px;

background:#cccccc;

float:left;

}

实际显示效果是:两个元素之间的距离为100px,相邻元素的边界属性在水平方向上会相加.

?

□ 负的边界值

例如两元素:content1 content2

<div class="content content1"></div>

<div class="content content2"></div>

?

?

两元素分别定义为:

.content{

height:70px;

width:300px;

padding-top:20px;

}

.content1{

margin-bottom:20px;

?

?

background:#cccccc;

?

}

.content2{

margin-top:-80px;

?

?

background:#666666;

?

}

实际显示效果是:两个元素之间的距离为20px与-80px之和-60px.所以元素content2会向上移动-60px,与content1有60个像素的重叠.

?

□ 在内联元素中使用margin属性(垂直)

这是一个在内联元素中使用<span class="content1">边界属性</span>的示例.

.content1{

margin-bottom:40px;

backtground:#999999;

}

实际显示效果是:文本在垂直方向上保持不变,原因是边界属性不能改变文本的行高,所以元素在秉直方向上没有文化.

?

□ 在内联元素中使用margin属性(水平)

这是一个在内联元素中使用<span class="content1">边界属性的示例,请注意换行处的边界属性</span>是否有变化,这将有助于对属性的理解.

margin:40px;

backtground:#999999;

}

实际显示效果是:边界属性只会在元素的开始和结束的地方产生效要.换行断开时并不产生边界效果.