如何在盒子模型中使用边距、边框和填充来组合？

在本文中，我们将学习盒子的不同部分，即边距、边框、填充和内容如何组合在一起来创建盒子。盒子模型指定了 HTML 元素如何在浏览器引擎中组织和建模，以及派生定义 HTML 元素尺寸的 CSS 属性。盒子模型可以被描述为一个矩形盒子，它是为 HTML 元素生成的，它形成了一个文档树。盒子模型有 4 个主要属性——边距、边框、填充和内容，它们有助于创建设计并确定网页的布局。这些属性可以如下给出：

• content ：这是盒子模型的主要部分之一，包含文本、图像、视频、链接等，可以使用 height 和 width 属性调整大小。
• padding ：它是用于在边界区域内的内容周围创建空间的属性。
• 边框：它覆盖内容下的区域，包括内容周围的填充。
• margin ：这个属性是指在元素周围创建空间，即在边界区域周围。

一个简单的盒子模型包含内容、边框和盒子所需的边框外的外部空间。这个外部空间由边距给出，它将盒子与其他盒子分开。当我们创建一个盒子容器时，我们可以指定边框和内部内容之间的距离，该距离由 padding 给出。边框的宽度和颜色可以由border属性给出。

示例：此示例描述了 CSS 中 Box 模型的基础知识。

HTML

  

    
    

  

    

        Welcome to GeeksforGeeks
    

  

输出：

CSS 盒子模型

考虑以下用于设置元素的宽度和高度属性的代码示例：

.box {
  margin: 100px 20px 50px 370px;
  width: 350px;
  height: 50px;
  font-size: 50px;
  border: 10px solid red;
  padding: 160px;
}

添加以下属性后，可以找到框的总高度和宽度：

Box width = width + (left padding + right padding) + (left border + right border) + (left margin + right margin)

Box height = height + (top padding + bottom padding) + (top border + bottom border) + (top margin + bottom margin)

因此，总宽度= 350+(160+160)+(10+10)+(370+20) = 1080px

总高度= 50+(160+160)+(10+10)+(100+50) = 540px

填充属性： CSS 填充用于在元素周围创建空间，在任何定义的边框内。我们可以为各个侧面（顶部、右侧、底部、左侧）设置不同的填充。添加边框属性以实现填充属性很重要。

句法：

padding: "padding-top|padding-right|padding-bottom|padding-left";

它由4个组件组成：

• padding-top：指定内容上方框内的填充宽度
• padding-right：指定内容右侧框内的填充宽度
• padding-bottom：指定内容下方框中的填充宽度
• padding-left：指定内容左侧框内的填充宽度

例子：

padding: 20px 30px 50px 70px;

我们也可以写

padding: 40px;

这会将框内所有四个方向的默认填充设置为 40 像素。

边框属性： It 是三个属性的组合。

句法：

border : "width style color | initial | inherit";

属性值：

• width ：这指定边框的厚度
• style ：这指定了边框的外观，可以是实线、虚线、点线、双线、凹槽、插图等。
• color：这指定边框的颜色

默认值为初始值。

例子：

border: 10px solid red;

保证金属性：它有四个单独的保证金属性：

句法：

margin: "top-margin right-margin bottom-margin left-margin";

• top-margin：指定框顶部的边距宽度
• right-margin：指定框右侧的边距宽度
• bottom-margin：指定框底部的边距宽度
• left-margin：指定框左侧的边距宽度

我们可以单独写，也可以一行写。

例子：

margin: 100px 20px 50px 370px;

如果我们写

margin: 20px;

它在参考对象的所有 4 个边上设置了 20px 的默认边距

我们可以从下面的例子中理解盒子模型：

示例 1：此示例描述了 Padding 和 Border 属性。

HTML

  

    
    

  

    
CSS Padding and Border
    

        
GeeksforGeeks
    

  

输出：

内容区域周围的绿色边框和白色填充

示例 2：以下代码说明了盒子模型的 Margin 属性。

HTML

  

    
    

  

    
CSS Margin Property
    

        
GeeksforGeeks
    

  

输出：

在盒子模型顶部应用边距