CSS Box Model: Margins, Borders, Padding

Introduction

Are you seeing any colors in this web page?

Are you able to see any design element in this web page?

If YES then congrats you know the CSS. Ok Bye (Kidding.)

As we have seen in our earlier blog that we can compare a web page structure to a human body structure. We have seen how HTML works as skeleton of body. But we all know that skeletons are not beautiful until you are fan of horror movies.

So for designing that skeleton means designing the web page by single soul named HTML, we use something called CSS or Cascading Style Sheets.

CSS Box Model

CSS Box Model is a fundamental design term that decides how an element will structured and looks on a HTML Web Page. In this design term every HTML Element is considered as box model. The CSS box model consists four layers, here they are:

Content

The actual content of the HTML Element takes place in the center of the box model. It could be anything from image, text to buttons etc. width and height defines size of this area of box model. The green area is content field.

Padding

The available space between the content and the border is known as padding. It increases the total size of the element but doesn’t effects the borders. The red area is padding.

Borders

Now the third layer that is the line surrounding the padding area is known as border. We can define width of a border and we can also change its design like dashes, dotted or solid. The yellow lines are borders.

Margin

The space outside the border that separates one element from another element means the distance between two elements is known as Margin. The gap between all the elements that is shown as dotted lines is Margin.

CSS Box Model Diagram

CSS Specificity Algorithm

When multiple rules target the same element then CSS Specificity determines which rule to be applied. There is ranking on the elements. If the element has higher specificity then it gets more priority and the rule applied to that element.

How Specificity Works

There are four level of powers that is ordered in strongest to weakest. Here is the following list:

Inline Styles	`style="color: red;"`	Super Strong
ID’s	`#id`	Very Strong
Classes, Attributes, Pseudo-Classes	`.class`, `[type="text"]`, `:hover`	Medium Strength
Elements, Pseudo-Elements	`p, div, h1`, `::before`	Weakest

Calculating Specificity

Each rules get some numbers that is three digit of 0,s and one digit 1. The higher the priority the earlier the digit 1 came. Here is the following list:

Inline Styles	1,0,0,0
ID’s	0,1,0,0
Classes, Attributes, Pseudo-Classes	0,0,1,0
Elements, Pseudo-Elements	0,0,0,1

Special Rules

!important overrides everything (but avoid overusing it).
If two rules have the same specificity, the last one in the CSS file wins

How CSS Works

There is three ways how we can add CSS in our website:

Inline CSS

We can write CSS code in the HTML code file in the same line where we need elements of design. This method is called Inline CSS.

<body>
    <h1 style="color: blue; font-size: 24px; text-align: center;">Hello, World!</h1>
    <p style="color: gray; font-family: Arial, sans-serif; line-height: 1.5;">
        This is a paragraph with inline CSS styling. It demonstrates the use of color, font, and line height properties.
    </p>
</body>

Internal CSS

When we write CSS code in the the HTML file but in different section that starts with a tag <style> then its known as Internal CSS.

<body>
    <div class="container">
        <h1>Welcome to My Website</h1>
        <p>This is a sample paragraph to demonstrate internal CSS.</p>
    </div>
    <style>
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
    </style>
</body>

External CSS

Writing CSS in a completely new separate file same like HTML known as External CSS.

<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text on my webpage.</p>
</body>

h1 {
    font-family: Georgia, serif;
    font-size: 2em;
    color: #333;
}
p {
    font-family: Georgia, serif;
    font-size: 1em;
    color: #666;
    margin: 10px 0;
}

Conclusion

In the above blog we have studied following things:

CSS is very useful to make a website good-looking and attractive.
CSS uses something known as Box Model that have four layers — Content, Padding, Borders, Margin
CSS uses specificity algorithm when multiple element targets same rule.
We can use CSS in three ways — Inline, Internal and External

Hope you have enjoyed the blog and learnt something new. Please like it encourage me for writing more blogs like this and hit the follow button to stay tuned for future updates.

Understanding the CSS Box Model: Margins, Border, Padding

Table of contents