CSS Box Model

By | October 19, 2020

Every HTML represents a rectangular box. And in CSS we use the term “box model” when we provide styling on an element or box. The rectangular box-like structure wraps around every HTML element and it includes four major components margin, border, padding and the content.

This image represents the element box model.

Vamware

CSS Box Model

Box model component:

  • Text Content
  • Padding
  • Border
  • Margin

Content: It represents the text and image you see on the web page.

Padding: It represents the spacing around the content. It helps to provide spacing between border and content.

Border: The border defines the limited area of an element box.

Margin:  It also deals with the spacing. It manages the spacing area of the outside border.

Example

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style >
        div {
        background-color: black;
        color:white;
        width: 300px;
        border: 15px solid red;
        padding: 50px;
        margin: 20px;
}
    </style>
</head>
<body>
    <h2>Example:</h2>
    <div>
        Video provides a powerful way to help you prove your point. When you click Online 
        Video, you can paste in the embed code for the video you want to add. You can also 
        type a keyword to search online for the video that best fits your document.
        To make your document look professionally produced, Word provides header, footer, 
        cover page, and text box designs that complement each other. For example, you can 
        add a matching cover page, header, and sidebar. Click Insert and then choose the 
        elements you want from the different galleries.
        Themes and styles also help keep your document coordinated. When you click Design 
        and choose a new Theme, the pictures, charts, and SmartArt graphics change to match 
        your new theme. When you apply styles, your headings change to match the new theme.
        Save time in Word with new buttons that show up where you need them. To change the 
        way a picture fits in your document, click it and a button for layout options appears 
        next to it. When you work on a table, click where you want to add a row or a column, 
        and then click the plus sign.
        Reading is easier, too, in the new Reading view. You can collapse parts of the 
        document and focus on the text you want. If you need to stop reading before you 
        reach the end, Word remembers where you left off - even on another device.
    </div>
</body>
</html>

Preview

Video provides a powerful way to help you prove your point. When you click Online
Video, you can paste in the embed code for the video you want to add. You can also
type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer,
cover page, and text box designs that complement each other. For example, you can
add a matching cover page, header, and sidebar. Click Insert and then choose the
elements you want from the different galleries.
Themes and styles also help keep your document coordinated. When you click Design
and choose a new Theme, the pictures, charts, and SmartArt graphics change to match
your new theme. When you apply styles, your headings change to match the new theme.
Save time in Word with new buttons that show up where you need them. To change the
way a picture fits in your document, click it and a button for layout options appears
next to it. When you work on a table, click where you want to add a row or a column,
and then click the plus sign.
Reading is easier, too, in the new Reading view. You can collapse parts of the
document and focus on the text you want. If you need to stop reading before you
reach the end, Word remembers where you left off – even on another device.

Height and Width properties

Before we set the height and width of any element, we need to know about the working of box model, else your content may overlap the border and margin you have provided.

<Note> When we set the width and height property on any element, we just set the height and width of the content area. Which means height and width property does not include padding, margin and border properties.

When we set the height and width property for an element content then the total height and width of the element also change.

There are formulas to calculate the total width and height of an element.

For Width

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

For height

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

Summary

  • Every HTML element represents a box-like structure.
  • In CSS when we style an element or its box, we called it “box model”.
  • Box model has four components padding, margin, border and content.
  • The height and width property only deal with the box content.

Leave a Reply

Your email address will not be published. Required fields are marked *