Web全栈-盒模型-内边距属性、外边距属性<!DOCTYPE html>
<html lang="en">
padding是外边距还是内边距<head>
<meta charset="UTF-8">
<title>内边距属性</title>
<style>
div{
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1{
padding-top: 20px;
}
.box2{
padding-right:40px;
}
.box3{
padding-bottom:80px;
}
.box4{
padding-left:160px;
}
.box5{
/*padding:20px 40px 80px 160px;*/
/*padding:20px 40px 80px;*/
/*padding:20px 40px;*/
padding:20px;
}
</style>
</head>
<body>
<!--
默认情况下，⽂字与边框没有任何内边距。
1.什么是内边距?
边框和内容之间的距离就是内边距
2.格式
2.1⾮连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
2.2连写
padding: 上右下左;
2.这三个属性的取值省略时的规律
2.1上右下左 > 上右下 > 左边的取值和右边的⼀样
2.2上右下左 > 上右 > 左边的取值和右边的⼀样下边的取值和上边⼀样
2.3上右下左 > 上 > 右下左边取值和上边⼀样
注意点:
1.给标签设置内边距之后, 标签占有的宽度和⾼度会发⽣变化
2.给标签设置内边距之后, 内边距也会有背景颜⾊
-->
<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>外边距属性</title>
<style>
*{
padding:0;
margin:0;
}
span{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: red;
}
div{
height: 100px;
border: 1px solid #000;
}
.box1{
/*
margin-top:20px;
margin-right:40px;
margin-bottom:80px;
margin-left:160px;
*/
/*margin:20px 40px 80px 160px;*/
/*margin:20px 40px 80px;*/
/*margin:20px 40px;*/
margin:20px;
}
</style>
</head>
<body>
<!--
1.什么是外边距?
标签和标签之间的距离就是外边距
2.格式
2.1⾮连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
2.2连写
margin: 上右下左;
2.这三个属性的取值省略时的规律
2.1上右下左 > 上右下 > 左边的取值和右边的⼀样
2.2上右下左 > 上右 > 左边的取值和右边的⼀样下边的取值和上边⼀样
2.3上右下左 > 上 > 右下左边取值和上边⼀样
注意点:
外边距的那⼀部分是没有背景颜⾊的
-->
<span class="box1">我是span1</span><span class="box2">我是span2</span><span class="box3">我是span3</span><div class="box4"></div> </body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。