css中padding与margin的奥秘
<!DOCTYPE html><html>
<head>
<title></title>
<style type="text/css">
div{
width: 98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1
{
padding-top: 20px;
}
.box2
{
padding-top: 40px;
}
.box3
{
padding-top: 80px;
}
.box4
{
padding-top: 160px;
}
.box5
{
padding:20px;
}
</style>
</head>
<body>
<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>
核心：1.什么是内边距?
边框和内容之间的距离就是内边距
注意点:
1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2.给标签设置内边距之后, 内边距也会有背景颜色
margin：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
span
{
display: inline-block;
width: 100px;
height: 100px;
border:1px solid red;
background: yellow;
}
div
{
height: 100px;
border: 1px solid red;
}
.box1{
margin:20px;
}
</style>
</head>
<body>
<span class="box1">我是span</span><span class="box2">我是span</span><span class="box3">我是span</span><div class="box4"></div>
</body>
</html>
1.什么是外边距?
标签和标签之间的距离就是外边距
注意点:
外边距的那一部分是没有背景颜色的
https://blog.51cto.com/u_14760424/4603966
页:
[1]