Box Model

2.4. Box Model#

In this section, you’ll learn about the CSS box model, which that defines how elements are structured and displayed on a webpage. Understanding the box model is crucial because it allows you to control the spacing, borders, and overall layout of your content.

HTML elements are categorised into two main types: block elements and inline elements. Each element on the page belongs to either category by default. You can override this with your own CSS.

2.4.1. display Property#

The way an element flows or fits with other page elements is determined by the value of its display property in CSS.

By default, elements have a specific display value assigned to them:

  • Block elements have display: block;

  • Inline elements have display: inline;

2.4.2. Block Elements#

Block elements start on a new line and take up the full width available by default, stacking one on top of the other.

Common Block Elements:

Examples of block elements are:

  • <div>

  • <h1> to <h6> (headings)

  • <p> (paragraph)

  • <ul> and <ol> (lists)

  • <li> (list items)

Example:

In this example, each element starts on a new line because they are block elements.

<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my webpage.</p>
<p>This is another paragraph, and it starts on a new line.</p>

2.4.3. Div#

The <div> (division) element is a block-level element used as a container to group other HTML elements. It doesn’t have any special formatting or meaning, rather it they are used for:

  • Layout: A div can be used to create sections like headers, footers, sidebars, and main content areas.

  • Styling Sections: It can wrap multiple elements to apply styles or manipulate them as a single unit.

<div> elements are block elements and we will use them in the following section to explain the box model.

Example:

In this example, the <div> groups the heading and paragraph together, allowing you to style them as a single section.

<div style="color: red;">
    <h2>About Me</h2>
    <p>Hello! I'm a high school student learning web development.</p>
</div>

2.4.4. Box Model#

The CSS Box Model is a way of describing the space a block element occupies on a webpage. It consists of four parts:

  1. Content: The size of of content inside the element.

  2. Padding: The space between the content and the border.

  3. Border: The line surrounding the padding and content.

  4. Margin: The space outside the border that separates the element from other elements.

Example

<div style="margin: 20px; padding: 10px; border: 2px solid black;">
    <p>This box has margin, padding, and a border.</p>
</div>

Explanation

  • Margin: 20px of space around the outside of the border.

  • Padding: 10px of space between the content and the border.

  • Border: A 2px solid black line around the padding and content.

2.4.5. Inline Elements#

Inline elements only take up as much space as necessary and flow along with the surrounding content.

Common Inline Elements:

Examples of inline elements are:

  • <span>

  • <a> (links)

  • <img> (images)

  • <b> (text formatting)

Example:

Here, the <strong> tag is an inline element that styles the word “bold” without breaking the flow of the sentence.

<p>This is a <strong>bold</strong> word in a sentence.</p>

2.4.6. Glossary#

Block#

A block element is an HTML element that starts on a new line and extends to fill the full width available, stacking vertically by default.

Border#

The border is the line or edge that surrounds an element’s padding and content, forming a visible outline around the element.

Box Model#

The CSS Box Model is a framework that describes how HTML elements are structured and displayed, consisting of four parts: content, padding, border, and margin.

Content#

Content refers to the actual text, images, or other media contained within an HTML element.

Display#

The display property in CSS determines how an HTML element is rendered on the page, controlling its layout behaviour as block, inline, or other display types.

Inline#

An inline element is an HTML element that does not start on a new line and only takes up as much width as necessary, flowing within the surrounding content.

Margin#

Margin is the space outside an element’s border that separates it from other elements, adding space between elements on a webpage.

Padding#

Padding is the space between an element’s content and its border, adding internal spacing around the content within the element.