Box-Model in CSS

What is box model?

  • Box Model is just like a box that wraps around every HTML element.

  • A box model contains content, padding, border, and margin.

Understanding Box Model

i) content - It is the actual content which includes: text, and images

ii) padding- Creates the space around the content.

iii) border- Border area where the content's border will be set.

iv) margin- Creates the space around the content border.

How the actual box model looks like

Understanding With Example

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title> Box Model in CSS</title>
        .myBox {
            width: 200;
            border: 4px solid skyblue;
            padding: 20px;
            margin: 20px;

    <div class="myBox"> This is a Box  </div>


Box Model in CSS Part-8 PDF

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad

Ads Section