CSS盒子模型

回头科科

于 2022-04-21 12:41:01 发布

阅读量198

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css盒子模型

本文链接：https://blog.csdn.net/jcf52/article/details/124318603

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了CSS盒模型，包括margin外边距和padding内填充。margin用于控制元素间的距离，提供上右下左的简写方式；padding则控制内容与边框间距，同样有多种简写形式。通过理解这些概念，可以更好地布局网页元素。

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

一.margin外边距

二.padding内填充

CSS盒模型详解（图文教程） - 千古壹号 - 博客园

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。

一.margin外边距

.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}

推荐使用简写：

margin: 5px 10px 15px 20px;

顺序：上右下左

二.padding内填充

.padding-test {
padding-top: 5px;
padding-right: 10px;
 padding-bottom: 15px;
 padding-left: 20px;
 }

推荐使用简写：

div{
            padding: 5px 10px 15px 20px;
        }

顺序：上右下左
补充padding的常用简写方式：

提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

例子：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div{
            border: 100px;
            border-style: solid;
            border-color: red;
            background-color: yellow;
            margin-top: 5px;
            margin-right: 10px;
            margin-bottom: 15px;
            margin-left: 20px;
        }
        div{
            padding: 5px 10px 15px 20px;
        }
        p{
            border: 50px    ;
            background-color: #1b6d85;
            border-color: #0f0f0f;
            margin: 5px 10px 15px 20px;
        }
        p {
            padding-top: 5px;
            padding-right: 10px;
            padding-bottom: 15px;
            padding-left: 20px;
 }
    </style>
</head>
<body>
<div>回头科科div</div>
<p>回头科科p</p>

</body>
</html>

效果图：