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.什么是外边距?
标签和标签之间的距离就是外边距
注意点:
外边距的那一部分是没有背景颜色的

[jQuery] css中padding与margin的奥秘

相关帖子

教你使用HTML/CSS和Three.js的喷火龙小游戏

基于 HTML+CSS+JS 的石头剪刀布游戏

利用CSS换变文本选中后的颜色

常用的css伪类a标签

Q+CSS+DIV多彩随机变化链接样式tag标签样式

好看的CSS剪裁GIF背景图片动画特效

利用HTML、CSS和JS制作随机密码生成器

css如何调整字体颜色

javascript如何改变背景

react如何引入css

飞奔的炮台 LV3