CSS Box model

❮ Previous Next ❯

Think of all HTML elements like boxes.

The CSS Box Model

In CSS, we use the phrase "box model" to discuss how things look and are arranged.

The CSS box model is like a container for each part of a web page. It has four parts: margins, borders, padding, and the stuff inside. Look at the picture below to see how it works:

Here's a breakdown of the various components:

Content - The Content inside the box, where you see words and pictures.
Padding - This makes some space around the content. The padding is see-through.
Border - A border surrounds the space inside the padding and the actual content.
Margin - Removes content outside the border. The space outside the border is see-through.

The box model lets us put a frame around things and set the gaps between them.

Width and Height of an Element

To make sure an element's size looks right on all web browsers, you must understand how the box model functions. This involves setting the width and height as needed.

Important:When you specify the width and height of an element using CSS, you are only defining the size of the inner content area. To determine the overall size of the element, you need to consider the additional space taken up by padding, borders, and margins.

Calculation:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

To find the total width of an element, follow this calculation:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The complete height of an element needs to be figured out in the following way:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        background-color: lightgrey;
        width: 300px;
        border: 15px solid green;
        padding: 50px;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Demonstrating the Box Model</h2>
    <p>The CSS box model is like a box around each thing on a webpage. It has borders, padding, margins, and the actual content inside.</p>
    <div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 320px;
        height: 65px;
        padding: 10px;
        border: 5px solid gray;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h2>Calculate the total width:</h2>
    <img src="/assets/files/parrot.jpg" width="350" height="263" alt="parrot">
    <div>The image displayed has a width of 350 pixels. The overall width of this element remains the same at 350 pixels, and the total height of the element is 80 pixels.</div>
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid

CSS Box model

The CSS Box Model

Width and Height of an Element

Web Development