一,内边距属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>47-内边距属性.html</title>
<style>
div{
width: 98px;
height: 90px;
border:solid;
}
.box1{
padding-top: 20px;
}
.box2{
padding-left: 20px;
}
.box3{
padding-right: 100px;
}
.box4{
padding-bottom: 50px;
}
.box5{
padding: 20px 50px 100px 200px;
}
</style>
</head>
<body>
<!--
1,什么是内边距
边框和内容之间的距离
2,格式
(1),不连写
padding-top
padding-bottom
padding-left
padding-right
(2),连写
padding: 上 右 下 左
可以省略取值
-->
<div class="box1">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
<hr>
<div class="box2">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
<hr>
<div class="box3">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
<hr>
<div class="box4">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
<hr>
<div class="box5">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
</body>
</html>
二,外边距属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>48-外边距属性.html</title>
<style>
span{
/* span 是行内元素 不能设置宽高 要设置需要转换 */
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
div{
height: 50px;
border: 1px solid #000;
}
.box1{
/*margin-top: 20px;
margin-right: 40px;
margin-bottom: 80px;
margin-left: 160px;*/
margin: 20px 40px 80px 160px;
}
</style>
</head>
<body>
<!--
1,外边距
标签和标签之间的距离
2,格式
(1),连写
margin:上 右 下 左;
(2),非连写
margin-top:;
margin-right:;
margin-bottom:;
margin-left:;
3,注意
-->
<span class="box1">我是span</span><span class="box2">我是span</span><span class="box3">我是span</span>
<div class="box"></div>
</body>
</html>
三,外边距合并的特殊之处
外边距设置,在水平方向上的两个标签上都相向设置,那么就会将两个外边距的距离叠加在一起;
在在垂直方向上的两个标签上都相向设置,那么就会有一个比较大的外边距代替两个外边距,不会叠加,只会显示一个比较大外边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>49-外边距的合并现象.html</title>
<style>
span{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
div{
height: 100px;
border: 1px solid #000;
}
/* 设置右边距 */
.hezi1{
margin-right: 50px;
}
.hezi2{
margin-left: 100px;
}
.box1{
margin-bottom: 50px;
}
.box2{
margin-top: 150px;
}
</style>
</head>
<body>
<!--
在默认布局的垂直方向上,默认情况下外边距是不会叠加的,会出现合并现象,谁的外边距大就会听谁的
-->
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>