In CSS, the box model describes the extraction of HTML elements from a web page. Every HTML element is treated as a rectangular box, and this box is composed of several layers.
- Content: The innermost part of the box and contains the actual content of the element, such as text, images, or other child elements. The width and height properties in CSS primarily apply to the content area.
- Padding: This is the space surrounding the content, between the content and the border. You can set the thickness of this area for each of the four sides (top, right, bottom, left) individually or by using shorthand. The background color of the element extends into the padding area.
- Border: This is a line that surrounds the padding and content. The border property allows you to set the style (e.g., solid, dashed, dotted), width, and color of the border.
- Margin: This is the outermost layer, surrounding the border. It represents the space between the current element and neighboring elements. You can set the size of this transparent area using the margin property, either individually for all four sides or using shorthand. Vertical margins of block-level elements can collapse, meaning that the space between them is determined by the larger of the two adjacent margins.
By default, setting an element’s width and height only sets the content box’s dimensions. The total width and total height of the element as rendered on the page are then calculated by adding the padding, border, and content widths (and heights).
The box-sizing property can change this behavior. Setting box-sizing: border-box; makes the width and height properties include the padding and border in the element’s total size. This is often considered a more in-built model for layout.
Example of box model:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid red;
margin: 30px;
background-color: yellow;
color: black;
text-align: center;
line-height: 100px;
}
.border-box {
box-sizing: border-box; /* Includes padding and border in width/height */
}
</style>
</head>
<body>
<div class="box">Content (200px x 100px)</div>
<div class="box border-box">Content (still appears 200px x 100px total)</div>
</body>
</html>
In the first div, the total width will be 200px (content) + 20px (left padding) + 20px (right padding) + 5px (left border) + 5px (right border) = 250px, and the total height will be 100px (content) + 20px (top padding) + 20px (bottom padding) + 5px (top border) + 5px (bottom border) = 150px. The margin of 30px will add space around this entire rendered box.
In the second div with box-sizing: border-box;, the declared width of 200px and height of 100px will be the total size of the box, including padding and border. The content area will be smaller (200px – 20px – 20px – 5px – 5px = 150px width, and 100px – 20px – 20px – 5px – 5px = 50px height). The margin will still add space around the total box.
Block-Level vs. Inline Elements
HTML elements are typically rendered as either block-level or inline elements. This display property affects how the elements behave in the normal document flow.
Block-Level Elements:
- Occupy the full width available in their parent container by default.
- Start on a new line and force subsequent content to a new line as well.
- Can contain both block-level and inline elements.
- Respect width and height properties, as well as padding and margin on all four sides.
Examples of common block-level elements include <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <section>, <article>, <nav>.
Example of block-level elements:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
border: 1px solid blue;
margin-bottom: 10px;
}
p {
background-color: lightgreen;
border: 1px solid green;
}
</style>
</head>
<body>
<div>This is a block-level div element.</div>
<p>This is a block-level paragraph element.</p>
<h1>This is a block-level heading element.</h1>
</body>
</html>
In this example, each div, p, and h1 will take up the full width of the body and appear on a new line.
Inline Elements:
- Only take up as much width as necessary to contain their content.
- Do not start on a new line; they flow along with surrounding content.
- Typically contain only data or other inline elements.
- Do not respect width and height properties. Only horizontal padding and margin are applied; vertical padding and margin may affect the element visually but won’t affect the flow of surrounding inline elements.
Examples of common inline elements include <span>, <a>, <img>, <em>, <strong>, <code>, <br>, <input>, <select>, <textarea>, <label>.
Example of inline elements:
<!DOCTYPE html>
<html>
<head>
<title>Inline Elements</title>
<style>
span {
background-color: yellow;
border: 1px solid orange;
margin: 5px; /* Only horizontal margins will have a visible effect on flow */
padding: 5px; /* Only horizontal padding will have a visible effect on flow */
}
em {
background-color: lightcoral;
border: 1px solid red;
}
</style>
</head>
<body>
This is some <span>inline text</span> with an <em>emphasized</em> word.
<br>
Another line of text with more <span>inline elements</span>.
</body>
</html>
In this example, the span and em elements will flow along the same line as the surrounding text, only taking up the space needed for their content.
Changing Display Type
The display CSS property can be used to override the default display behavior of an element. Some common values for the display property include:
- block: Makes an element behave like a block-level element.
- inline: Makes an element behave like an inline element.
- inline-block: Creates an inline-level block container. The element flows like inline content but respects width, height, padding, and margin like a block-level element.
- none: Removes the element from the document flow completely; it takes up no space and is not displayed.
- grid: Makes the element a grid container for CSS Grid Layout.
- flex: Makes the element a flex container for CSS Flexbox Layout.
Example of change the display type:
<!DOCTYPE html>
<html>
<head>
<title>Changing Display Type</title>
<style>
li {
display: inline; /* Make list items appear on the same line */
margin-right: 10px;
}
span {
display: block; /* Make span behave like a block element */
background-color: #f0f0f0;
border: 1px solid #ccc;
margin-bottom: 5px;
padding: 5px;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
</ul>
<hr>
<span>This is a span that is displayed as a block.</span>
<span>Another span displayed as a block.</span>
</body>
</html>In this example, the li elements, which are block-level by default, are made to display inline, appearing horizontally. The span elements, which are inline by default, are made to display as block, each taking up a new line and respecting block-level properties like margin-bottom and the set background and border.
CSS3 Topics