如何设置CSS的边距和填充，以及酷的布局技巧” data-gatsby-head =' true”/> Christopher Nolan 发布： 2025-02-09 13:05:16 原创 746 人浏览过

>本教程阐明了CSS边距和填充之间的区别，说明了它们对网页元素间距的影响。 我们将探索保证金崩溃，不同单位在响应式设计中的含义，并以CSS保证金和填充布局技术结束。

密钥概念：

CSS框模型是基本的：元素是由内容，填充，边框和边缘定义的矩形框。
• 通常会使初学者感到困惑。默认值
• 将填充物和边界添加到元素的宽度和高度。 box-sizing是一种常见的解决方案，可确保填充和边界包含在指定的宽度和高度中。box-sizing: content-box box-sizing: border-box> CSS精确控制元素所有四个侧面的填充物和边缘。填充围绕内容；边距是外层，在元素和其邻居之间创造空间。
>
• 边距和填充物提供多功能应用：核心元素，间距元素和维持图像宽高比。 掌握这些技术可以解决许多布局挑战。

了解CSS框模型：

> css元素是矩形盒子，由：组成：

content

padding
边界
边距
• 内容集中存在；填充内容；围绕填充物的边界；边缘形成最外层的。

CSS盒子尺寸解释了：

>

是常见的混乱来源。 由于增加填充物和边界，两个50％的宽度元素可能不适合其容器。 当添加填充或边框时，默认值会增加元素的总宽度。

>通过在指定宽度内包含填充和边界来简化布局。 许多CSS重置所有元素都使用

：box-sizing>

box-sizing: content-box（注意：存在更简单的重置，但这允许选择性异常。 box-sizing: border-box>探索MDN或规范上的更多资源。 互动演示增强了实际理解。border-box 在CSS中设置填充物：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

填充是使用>，

，

，box-sizing，

或速记

属性：

codepen演示说明了这些示例。 观察删除

。padding-top的影响 padding-rightpadding-bottom在CSS中设置保证金：padding-leftpadding

类似于填充物，使用margin-top>，margin-right，margin-bottom，margin-left，或速记margin属性：>

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

codepen演示显示带有漂浮元素的边距使用。 在

单元选择：

避免在响应式设计中的边缘和填充物中避免绝对单位（像素）。 基于百分比的值适应屏幕尺寸的变化。 单位尺寸为字体大小。视口单元（，，

，

）基于视口大小。 单位计算：em>百分比相对于父元素的宽度。 vw>单位相对于元素的字体大小。视口单元相对于视口尺寸。vh vmin vmax边缘崩溃：>相邻的同胞元素的顶部和底部边缘可以塌陷成一个边缘。 亲子边缘也可能崩溃。 添加填充或边界可以防止这种情况。

>

实用应用：em

居中元素：>使用

在其父母内水平中心元素。

>>间距元素：

边距有效地太空元素，对flexbox特别有用。

• 维持宽高比：将父的高度设置为零，并使用（根据纵横比计算）维持图像宽高比。 margin: 10px auto;
• 结论： 该教程区分了边缘和填充，展示了其速记语法和适当的单位。 提供了实用的布局应用程序和更多资源。 通过高级技术来增强您的CSS技能。
• FAQS： padding-top

边缘与填充：边距是外部空间；填充是内部空间。

设置值：

>使用

>和>具有各种单位的属性（像素，百分比，，

）。

）。 在
• 负值：负值均可允许。
>。
• value：margin padding用于水平中心元素水平元素。em rem
>百分比值：
• 百分比是相对于父母的宽度。

以上是如何设置CSS的边距和填充，以及酷的布局技巧” data-gatsby-head =' true”/>