CSS：padding，margin的区别

最新推荐文章于 2024-07-08 11:32:20 发布

知道了喵

最新推荐文章于 2024-07-08 11:32:20 发布

阅读量249

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_35129075/article/details/133941184

版权

什么时候用padding，什么时候用margin？

在编写CSS时，padding 和 margin 用于控制元素之间的间距。它们的主要区别在于它们所影响的空间：

padding：用于控制元素内部的间距，即元素内容与其边框之间的距离。当你想增加元素内部的空间时，使用 padding。
margin：用于控制元素之间的外部间距，即元素与相邻元素之间的距离。当你想增加元素之间的空间时，使用 margin。

以下是一些关于何时使用 padding 和 margin 的指导原则：

当你想增加元素内部的空间，例如为文本或图像提供更多的呼吸空间时，使用 padding。
当你想调整元素之间的距离，例如将两个相邻的按钮分开时，使用 margin。
当你想为一个元素添加背景颜色或边框时，使用 padding 可以确保背景颜色或边框覆盖整个内部空间。
当你想为一个元素设置宽度和高度时，padding 会影响元素的实际尺寸（即内容 + padding + 边框），而 margin 不会。

总之，在编写CSS时，根据需要调整元素内部空间或元素之间的距离来选择使用 padding 或 margin。

padding是怎么影响实际尺寸的？

padding 会影响元素的实际尺寸，因为它增加了元素内容与边框之间的空间。实际尺寸是由元素的内容尺寸、padding、边框（border）和外边距（margin）组成的。但是，需要注意的是，margin 不会影响元素的实际尺寸。

以下是一个例子来说明 padding 是如何影响实际尺寸的：

假设我们有一个 div 元素，其内容尺寸（宽度和高度）分别为 100px 和 50px。接下来，我们为该元素添加 padding 和 border：

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    width: 100px;
    height: 50px;
    background-color: lightblue;
    padding: 20px;
    border: 5px solid black;
  }
</style>
</head>
<body>

<div>这是一个 div 元素。</div>

</body>
</html>

在这个例子中，我们设置了 padding 为 20px，border 为 5px。那么元素的实际尺寸将会是：

实际宽度 = 内容宽度 + 左侧 padding + 右侧 padding + 左侧 border + 右侧 border = 100px + 20px + 20px + 5px + 5px = 150px。
实际高度 = 内容高度 + 顶部 padding + 底部 padding + 顶部 border + 底部 border = 50px + 20px + 20px + 5px + 5px = 100px。

因此，添加了 padding 和 border 后，div 元素的实际尺寸为 150px x 100px。这个例子清楚地说明了 padding 是如何影响元素的实际尺寸的

box-sizing 的的作用

box-sizing 是一个 CSS 属性，用于定义浏览器如何计算元素的总宽度和高度。它有两个主要的值：content-box 和 border-box。

content-box（默认值）：这是 CSS2.1 标准中定义的盒模型。在这种情况下，元素的宽度和高度只包括内容区域，不包括 padding、border 和 margin。因此，实际尺寸 = 内容尺寸 + padding + border。
border-box：这是 CSS3 中引入的一个新盒模型，也称为“怪异盒模型”（quirks mode box model）。在这种情况下，元素的宽度和高度包括内容区域、padding 和 border，但不包括 margin。因此，实际尺寸 = 内容尺寸。

要使用 box-sizing 属性，只需将其添加到你的 CSS 规则中，并为其分配一个值。以下是一个使用 box-sizing 的示例：

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box;
  }
</style>
</head>
<body>

<div>这是一个 div 元素。</div>

</body>
</html>

在这个例子中，我们将 box-sizing 设置为 border-box。这意味着 div 元素的实际尺寸将包括内容区域、padding 和 border。因此，尽管我们设置了 padding 和 border，div 元素的实际尺寸仍然为 200px x 100px，而不是像之前那样增加。

使用 box-sizing 可以让你更轻松地控制元素的尺寸，尤其是在使用 padding 和 border 时。许多开发人员将其设置为全局样式，以便在整个项目中使用 border-box：

* {
  box-sizing: border-box;
}

这将使所有元素的默认 box-sizing 值为 border-box。

知道了喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS：padding，margin的区别

因此，尽管我们设置了 padding 和 border，div 元素的实际尺寸仍然为 200px x 100px，而不是像之前那样增加。padding 会影响元素的实际尺寸，因为它增加了元素内容与边框之间的空间。实际尺寸是由元素的内容尺寸、padding、边框（border）和外边距（margin）组成的。因此，添加了 padding 和 border 后，div 元素的实际尺寸为 150px x 100px。margin：用于控制元素之间的外部间距，即元素与相邻元素之间的距离。
复制链接

扫一扫