Introduction to the Box Model

1.1 Basics of the Box Model

The Box Model is the foundation for understanding how elements are placed and interact with each other on a webpage. It defines the structure and dimensions of HTML elements, and also how they are surrounded by padding, borders, and margins.

Basics of the Box Model

The CSS Box Model describes the composition of blocks in HTML elements. Each element consists of four main components:

• Content (content).
• Padding (padding).
• Border (border).
• Margin (margin).

These components define how an element will be displayed and how it will interact with other elements on the page.

Content

Content is the core part of the element, containing text, images, or other nested elements. The dimensions of the content can be explicitly set using the width and height properties, or determined by the element's content.

Example Usage

In this example, the content of the element .content includes the text "This is the content of the element.":

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        This is the content of the element.
      </div>
    
  

1.2 Visualizing the Box Model

Each element in the box model can be visualized as a rectangular block consisting of the following parts:

• Content: the inner content of the element, such as text or an image
• Padding: the space between the content and the element's border
• Border: the line surrounding the padding and content
• Margin: the space between the element's border and neighboring elements

Visualizing the Box Model:

    
      .element {
        width: 200px;           /* Content width */
        padding: 10px;          /* Padding */
        border: 2px solid red;  /* Border */
        margin: 20px;           /* Margin */
      }
    
  

1.3 Borders

Borders (border) surround the content and padding of an element. Borders can have various styles, thicknesses, and colors. They can be used to visually highlight elements on the page.

Example Usage

In this example, a border with a thickness of 5 pixels, dashed, and black color is applied to the element .border, surrounding the content and padding.

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        This is an element with a border.
      </div>
    
  

1

Task

Frontend SELF EN, level 16, lesson 1

Locked

Element Border

Element Border

Open

1

Task

Frontend SELF EN, level 16, lesson 1

Locked

Box Model

Box Model

Open