.Inline Elements
By default, inline elements do not begin on a new line or take up the full width of the viewport. In fact, width and height properties do not apply. Unlike block-level elements, inline elements do not break the flow of the document.
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.
Inline level elements include , , , , , , , , , , , , , , and — among others.
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.
Image Source
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 themin-width,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.
Say you specify the content width to 400px and add 30px padding, 10px border, and 10px margin. Then the total width of the box is 500. You get that total 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).
Here's the CSS:
div {
background-color: #DDDDDD;
width: 400px;
height: 150px;
padding: 30px;
border: 10px solid #FF00FF;
margin: 10px;
}
Here's the HTML:
The Standard CSS Box Model
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).
Here's the result:
Image Source
Since adding up the border, padding, and margin to calculate the real size of the box can be time consuming, you can use the alternative box model. To “turn on” this model, use the box-sizing property and set it to “border-box.” This will tell the browser to render the box (including everything but the margin) to the size you set. We'll use this model in the example below.
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.
Here's the HTML:
The Alternative CSS Box Model
< p >替代CSS盒模型,定义width or height attribute will determine not only the size of the contetn area but the size of the border, padding, and content areas of a box. If specified, thte margin will still have to be added to calculate the total size of the element.
Since I've set the box-sizing property to "border-box," the total width of the element will be 320px (the set width + margin-left and margin-right). Since the height of the div has not been explicitly defined, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box. In other words, its the height of the rendered text.
A div with almost the same CSS applied to it — except for the padding property. For this div, different padding is applied to each of its four sides rather than equal padding applied to all sides.
Here's the CSS:
#shorthand {
background-color: #DDDDDD;
box-sizing: border-box;
width: 300px;
padding: 30px;
border: 10px solid #FF00FF;
margin: 10px;
}
#longform {
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;
margin: 10px;
}
Here's the result:
Image Source
Borders Example
The border property lets us add and style a line around the content padding area. The thickness, color, style of this line can be defined by theborder-width,border-color, andborder-styleproperties, 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.
Let's use the max-width and min-height properties in the example below. We'll also use as many properties and values as possible to show the versatility of the border area.
Here's the CSS:
h2 {
box-sizing: border-box;
max-width: 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;
border-bottom: 20px solid #2266AA;
margin: 10px;
}
Here's the HTML:
The Borders CSS Box Model
In this CSS box model, a defined max-width constrains the content width of the heading and a defined min-height constrains the box height so that it;s taller than the rendered text.
使用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.
Here's the result:
Image Source
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: themargin-left,margin-right,margin-top,margin-bottomproperties or the shorthandmarginproperty.
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.
Before we dive into an example, you may realize that margins and padding seem similar. In case you get confused what the right option is for a certain element or layout, consider the followingkey differences between CSS margin and padding:
- 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:
Image Source
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:
Image Source
Using the CSS Box Model for Your Website
The CSS box model is one of the fundamentals ofwebsite development. 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!
