.Inline Elements
默认情况下，内联元素不会在新线路上开始或占据视口的全部宽度。实际上，宽度和高度属性不适用。与块级元素不同，内联元素不会破坏文档的流程。
Inline elements can contain other inline elements and data, but not block-level elements. For example, a paragraph element can contain an emphasis element — but not a heading element.
If the padding, border, and margin properties are applied vertically, then other inline boxes will not be forced away from the box around the element. If the padding, border, and margin properties are applied horizontally however, then other inline elements will be forced away from the box around the element.
内联级元素包括，，，，，，，，，，，，，，，，和 - 等等。
Here's a helpful illustration of the key differences between inline and block level elements. This example usingBootstrap CSSdisplays an inline button and a block-level button.
图像源
CSS Box Model Examples
Now, let’s examine the CSS box model in action with these CSS box model examples. Each example focuses on a specific layer of the box, moving from the inside out. We'll start with the content area.
Content Area Example
The innermost rectangle, known as the content area, may contain text or other visual elements.
Its dimensions are the content width and content height. When specified, the width and height attributes determine the content edge or perimeter of the content box. Often, the width and height aren't specified so the rendered content determines the content edge. In other words, the content area is only as wide and as at all as it needs to be to hold the content, which might be as little as one word. If the element is a block element, then the content edge can also be set with the最小宽度，，，，max-width，，，，min-height，，，，andmax-heightproperties.
Let's look at an example of a standard CSS box model.
In a standard CSS box model, the height and width attribute are specified. This determines the size of the content area. If the padding, border, and margin properties are also specified, then they must be added to the width and height to calculate the total size of the element.
假设您将内容宽度指定为400px，并添加30px填充，10PX边框和10PX边框。然后，盒子的总宽度为500。您可以通过添加内容宽度，左右和填充右侧，边框左和边界右，以及左翼和边缘权利（400 + 30 +）来获得总计。30 + 10 + 10 + 10 + 10）。盒子的总高度为250。您可以通过添加内容高度，填充顶和填充底，边框和边界底，以及保证金顶和边缘底（150 + 30 + 30 +）10 + 10 + 10 + 10）。
Here's the CSS:
div {
background-color: #DDDDDD;
width: 400px;
height: 150px;
padding: 30px;
border: 10px solid #FF00FF;
保证金：10px;
}
这是HTML：
标准CSS框型
In a standard CSS box model, the height and width attribute is specified. This determines the size of the content area. If the padding, border, and margin properties are also specified, then they will be added to the width and height to calculate the total size of the element.
This text makes up the content layer of the box. Since I've added 30px padding, 10px border, and 10px margin, the total width of the box is 500. You get that by adding the content-width, padding-left and padding-right, border-left and border-right, and margin-left and margin-right (400 + 30 + 30 + 10 + 10 + 10 + 10). The total height of the box is 250. You get that by adding the content-height, padding-top and padding-bottom, border-top and border-bottom, and margin-top and margin-bottom (150 + 30 + 30 + 10 + 10 + 10 + 10).
这是结果：
图像源
由于将边框，填充物和边距添加以计算盒子的实际尺寸可能很耗时，因此您可以使用替代框型号。要“打开”此型号，请使用盒子大小的属性并将其设置为“ Border-Box”。这将告诉浏览器将框（包括边距以外的所有内容）渲染到您设置的大小。我们将在下面的示例中使用此模型。
Padding Example
Padding的边界和内容之间的空间是一个element. Padding is an important element in web design because it helps make content more visible and readable.
An element's padding can be defined with the following properties:padding-top，，，，padding-bottom，，，，padding-left，，，，padding-right，，，，or the shorthand propertypadding。
If you'd like to add the same amount of padding on all four sides of the content area, then you can set the shorthand padding property with one value. If you'd like to set different amounts of padding, then you can use the long-form method. Let's use both methods in the example below.
这是HTML：
替代CSS框型
在替代CSS框型号中，定义的宽度或高度属性不仅会确定孔区域的大小，而且还确定边框，填充物和内容区域的大小。如果指定，仍然必须添加边距才能计算元素的总尺寸。
由于我已经将盒子大小属性设置为“边框框”，因此该元素的总宽度将为320px（设置宽度 +边距左右左右和边缘右翼）。由于尚未明确定义DIV的高度，因此高度是最高线框的顶部和Bottommost线框的底部之间的距离。换句话说，这是渲染文本的高度。
除填充属性外，几乎适用于其的CSS的DIV。对于此div，将不同的填充物应用于其四个侧面的每个侧面，而不是施加在各个侧面的填充物。
Here's the CSS:
#shorthand {
background-color: #DDDDDD;
box-sizing: border-box;
width: 300px;
padding: 30px;
border: 10px solid #FF00FF;
保证金：10px;
}
＃长表 {
background-color: #DDDDDD;
box-sizing: border-box;
width: 300px;
padding-top: 20px;
padding-bottom: 10px;
padding-left: 80px;
padding-right: 60px;
border: 10px solid #FF00FF;
保证金：10px;
}
这是结果：
图像源
边界示例
边境属性使我们可以在内容填充区域添加并设置一条线。该线的厚度，颜色，样式可以由边缘宽度，，，，border-color，，，，and边界风格properties, or you can use the shorthandborderproperty to define all three. Border-style values include solid, dotted, dashed, double, groove, ridge, and none.
The dimensions of the border area are the border-box width and border-box height. When specified, the width and height attributes determine the perimeter of the border area. If the box-sizing property is set to border-box, you can also define the border size with min-width, max-width, min-height, and max-height.
让我们在下面的示例中使用最大宽度和最小属性。我们还将使用尽可能多的属性和值来显示边界区域的多功能性。
Here's the CSS:
H2 {
box-sizing: border-box;
最大宽度：300px;
border: 2px solid #A00081;
padding: 5px;
}
p {
box-sizing: border-box;
min-height: 100px;
border: 2px solid #F00081;
padding: 5px;
}
blockquote {
background-color: #DDDDDD;
box-sizing: border-box;
width: 300px;
padding: 30px;
border-right: 2px dashed #000000;
border-left: 10px groove #8866AA;
border-top: 5px dotted #AAAAAA;
边界底：20px实心＃2266AA;
保证金：10px;
}
这是HTML：
The Borders CSS Box Model
在此CSS框模型中，定义的最大宽度限制了标题的内容宽度和定义的min-Height限制了框高度，以使其比呈现的文本更高。
使用CSS < blockquote >,我可以每一方的风格e border area of this blockquote to be unique. The border-right, border-left, border-top, and border-bottom properties are all defined with three values: the first defines its width, the second its style, and the third its color.
这是结果：
图像源
Margins Example
The margin is the empty space separating the element from its neighbors, and the outermost layer of the CSS box model. Its dimensions are the margin-box width and the margin-box height.
Its size can be defined by the following properties: the利润-left，，，，边缘权利，，，，利润-top，，，，利润-bottomproperties or the shorthand利润财产。
If the shorthand property is used, and only one value is defined, then it applies to all sides of the element. If two values are defined, then the first value represents the top and bottom margins and the second represents the right and left margins. If three values are defined, the first value represents the top margin, the second represents the left and right, and the fourth represents the bottom margin. If four values are defined, they represent the top, right, bottom, and left, respectively.
在我们介入一个例子之前，您可能会意识到利润和填充似乎相似。如果您感到困惑的是适合某个元素或布局的正确选择，请考虑以下内容CSS边距和填充之间的关键差异：
- Margin is the space outside of the border area, whereas padding is the space inside the border area.
- Margin backgrounds are always transparent, whereas the background of the padding area of a box is specified by the background property of the element.
- When increased, margins increase the gap between an element and any adjacent elements. When increased, padding increases the size of the element.
- In CSS, adjoining margins of two or more boxes can combine to form a single "collapsed" margin. While margin areas can collapse vertically, padding areas cannot.
Let's look at an example of a CSS box model with a collapsed margin.
Say a heading and paragraph are stacked on top of each other. The heading has a bottom margin of 60px and the paragraph has a top margin of 40px. To figure out the vertical margin between the heading and paragraph, you might be tempted to add both margins together for a total margin of 100px. That would look something like this:
图像源
However, the actual vertical margin would only be 60px. Why? Because the two margins collapse vertically. Here's how it would actually look on the front end:
图像源
Using the CSS Box Model for Your Website
The CSS box model is one of the fundamentals of网站开发。Understanding this model will enable you to better align elements with other elements and create more complex layouts.
Originally published Nov 17, 2020 7:00:00 AM, updated November 17 2020
Don't forget to share this post!
