内间距padding和外间距margin

Muskok

于 2023-08-20 22:23:54 发布

阅读量491

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/Muskok/article/details/132396943

版权

内间距padding

定义：内间距---元素和内容之间的间距

属性1---连写方式

属性名：padding

常见取值：

属性2---单方向设置

场景：只给盒子的某个方向单独设置内边距

属性名：padding - 方位名词

属性值：数字 + px

举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            max-width: 600px;
            margin: 0 auto;
        }

        .text {
            color: black;
            background-color: #eee;
            border: solid 2px red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="text">
            <p>豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
            </p>
        </div>


    </div>
</body>

</html>

运行以上代码，我们得到一个盒子里有一段文字，文字紧贴着盒子边缘

此时，文字内容与盒子边缘的间距为0，当我们使用padding属性时，可以看到如下画面

 .text {
       color: black;
       background-color: #eee;
       border: solid 2px red;
       padding: 50px;
        }

内容与盒子边框距离50px,这就是内间距padding的用法

外间距margin

定义：设置边框以外，盒子与盒子之间的距离

属性1---连写方式

属性名：margin

属性2—— 单方向设置

场景：只给盒子的某个方向单独设置外边距

属性名：margin - 方位名词

属性值：数字 + px

举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            max-width: 600px;
            margin: 0 auto;
        }

        .text {
            color: black;
            background-color: #eee;
            border: solid 2px red;
            padding: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="text">
            <p>豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
            </p>
        </div>
        <div class="text">
            <p>豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
            </p>
        </div>

    </div>
</body>

</html>

运行如上代码，我们可以得到两个紧贴在一起的盒子，此时两个盒子的外间距为0

当我们使用外间距margin属性时，可以看到两个盒子分开了50px

.text {
      color: black;
      background-color: #eee;
      border: solid 2px red;
      padding: 50px;
      margin: 50px;
        }

默认内外间距

注意：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置

比如：body标签默认有margin：8px

比如：p标签默认有上下的margin

比如：ul标签默认由上下的margin和padding-lef

......

这些默认的内外间距一定程度上会影响我们的自定义布局，所以在编写前端时通常会清除这些默认内外间距，清除方法只需在css里加入如下代码

*{
margin:0;
padding:0;
}

Muskok

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
内间距padding和外间距margin

这些默认的内外间距一定程度上会影响我们的自定义布局，所以在编写前端时通常会清除这些默认内外间距，清除方法只需在css里加入如下代码。此时，文字内容与盒子边缘的间距为0，当我们使用padding属性时，可以看到如下画面。运行如上代码，我们可以得到两个紧贴在一起的盒子，此时两个盒子的外间距为0。当我们使用外间距margin属性时，可以看到两个盒子分开了50px。比如：body标签默认有margin：8px。定义：设置边框以外，盒子与盒子之间的距离。定义：内间距---元素和内容之间的间距。属性名：margin。
复制链接

扫一扫