css中padding与margin的奥秘
【摘要】
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css...
<!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.什么是外边距?
标签和标签之间的距离就是外边距
注意点:
外边距的那一部分是没有背景颜色的
文章来源: blog.csdn.net，作者：贵哥的编程之路(陈业贵)，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/qq_37805832/article/details/108339159
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）