如何设置CSS的边距和填充，以及凉爽的布局技巧

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

密钥概念：

CSS框模型是基本的：CSS元素是矩形框，其尺寸由内容，填充，边框和边缘定义。
• 盒子尺寸通常会使初学者感到困惑。默认的
将填充物和边界添加到元素的宽度和高度上，通常会导致布局问题。 设置
• 是一个常见的解决方案。box-sizing: content-box box-sizing: border-box> CSS精确控制元素所有四个侧面的填充物和边缘。填充围绕内容；边距是外层，在元素和其邻居之间创造空间。
>
• 边缘和填充物具有多功能应用，包括将元素集中在容器中，元素间距和维护图像宽高比。掌握这些技术可以解决许多布局问题。

CSS框模型解释了：

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

content（元素的内部文本或图像）

填充（内容和边界之间的空间）
边界（元素的轮廓）
边距（元素和其他元素之间的外部空间）
• 以下图说明了以下图：

了解CSS盒子的尺寸：

> 盒子尺寸是CSS新移民的常见混乱来源。 由于增加填充物和边界，两个50％的宽度元素可能不适合其容器。 默认情况下，填充和边界会增加元素的总宽度。 为了简化布局，设置

，以便在指定的宽度中包含填充和边框。 CSS重置通常在全球范围内应用

：

>

box-sizing: content-box实验交互式演示以巩固您的理解。box-sizing: border-box 在CSS中设置填充物：border-box

<code class="language-css">html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}</code>

>使用

，

，，的控制填充或shorthand

属性：

> padding-top padding-rightpadding-bottom在CSS中设置保证金：padding-leftpadding

类似于填充物，使用

<code class="language-css">/* All sides */
padding: 20px;

/* Vertical | Horizontal */
padding: 2em 4em;

/* Top | Horizontal | Bottom */
padding: 1em 20px 2em;

/* Top | Right | Bottom | Left */
padding: 10px 10% 2em 15%;</code>

，

，，，或速记

属性：

> margin-top margin-right边距在元素之间创造空间。margin-bottom 在

• 单位：避免在响应式设计中的边缘和填充物中避免绝对单位（像素）。百分比或相对单元（EM，REM）更好地适应屏幕尺寸和字体更改。

根据所使用的单位（基于母体宽度，基于元素字体大小，基于视口尺寸的视口单元），
• >单元计算：浏览器浏览器以不同的单位计算边距和填充。

  ）。

>边缘折叠：
• 相邻兄弟姐妹的顶部和底部边缘可以塌陷成一个边缘（两个较大的边缘）。 添加填充或边框阻止了这种情况。

  >

实用应用：

中心：

• 中心块级元素水平使用>。 margin: 10px auto;

>间距元素：
• >使用边距与空间元素分开，特别有用。

维持纵横比：
• 在父元素上使用填充顶部为一个百分比（根据所需的纵横比计算）：0以维持图像纵横比。

  >

结论：

本教程为理解和使用CSS边缘和填充提供了坚实的基础。 进一步探索高级技术将增强您的CSS技能。>

以上是如何设置CSS的边距和填充，以及凉爽的布局技巧的详细内容。更多信息请关注PHP中文网其他相关文章！