【html】盒模型div，边框border，内边距padding，外边距margin

贺情

已于 2022-05-13 09:45:38 修改

阅读量9.3k

点赞数 15

文章标签： html css 前端

于 2022-04-13 08:44:53 首次发布

本文链接：https://blog.youkuaiyun.com/m0_50947589/article/details/124130046

版权

本文介绍了HTML盒模型的基本概念，包括content、border、padding和margin。通过实例详细讲解了边框border的不同样式，如何利用border绘制三角形和圆形，以及内边距padding对外部尺寸的影响。同时，文章还探讨了外边距margin的叠压和塌陷问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初识盒模型

要想学习盒模型，首先要知道什么是盒模型。顾名思义，每个div标签都是一个矩形，像一个盒子，所以HTML页面布局可以理解为多个盒子嵌套排列而成。

盒模型的组成

盒模型包括：content（内容）、border（边框）、padding（内边距）以及margin（外边距）。

content（内容）：显现图像和文本内容。

border（边框）：指围绕在盒模型外侧的一条样式自定义的线。

padding（内边距）：指元素内容与边框之间的间距。

margin（外边距）：指围绕在边框之外的空白区域。
在这里插入图片描述

div的基础属性

div的基础属性包括width（宽度），height（高度）以及background-color（背景颜色）。如果div中没有具体的内容，可以用这三个属性让div“现身”。

div{
            width: 100px;
            height: 100px;
            background-color: gold;
        }

在这里插入图片描述

关于border（边框）

border是围绕在盒模型外侧的一条样式自定义的线。border是一个复合属性，用法为border：width style color；
例如：

div{
            width: 100px;
            height: 100px;
            background-color: gold;
            border:10px solid red;
        }

在这里插入图片描述
如果分开写的话，可以写为：

			border-width: 10px;
            border-style: solid;
            border-color: red;

这与上文提到的border：10px solid red；作用是一样的。
其实border-style不仅有solid一种，以下是常用的一些样式：

border-style	边框样式
solid	直线
dashed	虚线
dotted	点线
double	双线

在这里插入图片描述
给div加上border之后，不难看出长宽都相应的增加了。所以border会增加盒模型的面积。

利用border绘制三角形

div{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin: 20px;
            border: 10px solid red;
            border-left-color: blue;
            border-right-color:green;
            border-bottom-color:orange ;
        }

这段代码的实现效果为

在这里插入图片描述
可见每边的边框相当于一个等腰梯形，如果要使梯形变为三角形，只需让梯形的短边长度为零即可。

div{
            width: 0px;
            height: 0px;
            background-color: gold;
            margin: 20px;
            border: 50px solid red;
            border-left-color: blue;
            border-right-color:green;
            border-bottom-color:orange ;
        }

在这里插入图片描述

利用border-radius制作圆

border-radius的含义为圆角，可以根据自定义的值改变边框角的弧度。当border-radius：50%；时，div整体会变成一个圆形。

.second{
            width: 100px;
            height:100px;
            background-color: yellow;
            border: 20px solid skyblue;
            border-radius: 50%;
        }

在这里插入图片描述
结合三角形和圆形的绘制过程，可以得出扇形的绘制过程

div{
            width: 0px;
            height: 0px;
            background-color:transparent;/* 透明色 */
            margin: 20px;
            border: 50px solid red;
            border-left-color: transparent;
            border-right-color:transparent;
            border-bottom-color:orange ;
            border-radius: 50%;
        }

在这里插入图片描述

关于padding（内边距）

内边距指的是元素与边框之间的空白区域，可以有1~4个值，按照顺时针即上右下左的顺序依次赋值，用代码实现为

padding: 20px 30px 40px 50px;

还可以分为四个方向分别实现：

内边距	方向
padding-top	上边距
padding-right	右边距
padding-bottom	下边距
padding-left	左边距

在这里插入图片描述
在使用padding时，需要注意padding会增加盒模型的面积。用两个长宽相等的盒模型比较，可以更直观的得出结论。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div></div>
    <div style="padding: 20px 30px 40px 50px;"></div>
</body>
</html>

在这里插入图片描述
所以在运用padding时，要注意各边的长度相应的缩小才能保持原盒模型的面积不变。

关于margin（外边距）

外边距是指围绕在边框之外的空白区域。同样可以有1~4个值，以顺时针即上右下左的顺序依次赋值，用代码实现为：

margin：20px；/* 代表上右下左四个方向各有20px的外边距 */

还可以分为四个方向分别实现：

外边距	方向
margin-top	上边距
margin-right	右边距
margin-bottom	下边距
margin-left	左边距

在使用margin时，需要注意叠压问题和塌陷问题。那么这两个问题指的是什么呢？

叠压问题

首先我们假设有两个div上下排列，div1的下边距为100px，div2的上边距为150px，那么两个div之间的间距是多少呢？100px？250px？还是150px？
答案是150px。
这种现象就很好地体现了叠压问题。叠压问题指的是：常态下，兄弟标签间的上下间距以大值为准。我们来想这样的一个例子，古代的剑客在功力高深的时候会给人一种有剑气的感觉，假设A剑客的剑气半径是100米，B剑客的剑气是150米，那么二者之间的安全距离是多少呢？很显然是150米。

了解了叠压问题，我们再来学习一下塌陷问题。

塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin</title>
    <style>
        div{
            color: blue;
            width: 100px;
            height: 100px;
            font-size: 30px;
        }
        .fa{
            width: 300px;
            height: 300px;
            background-color: chocolate；
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: darkgreen;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述
我们的本意原是让div.son与div.fa产生30px的上边距，却不曾想div.fa连同div.son一起向下移动了30px的距离，与我们的意愿背道而驰，这样的现象就称为塌陷问题。
遇到这样的问题不要着急，首先要知道问题形成的原因。
塌陷问题出现的原因：常态下，父级的第一个子级标签是一个块标签，并且使用了margin或者margin-top。
针对这个问题，有以下的解决方案：
1.在父级使用border。
2.在父级使用padding-top，注意高度要相对应减少。
3.在父级使用overflow：hidden（溢出隐藏）。
但是要注意的是方案1和方案2相对应的边长要缩小，才能保证原div的面积不变化。