All About CSS Box Model

Mukul Vashishth — Tue, 12 Jul 2022 09:52:53 +0000

CSS has many advanced concepts which can be daunting for a beginner but understanding them becomes a little bit easier if the basics are clear in your head and Box Model in CSS is an important concept when working with design and layout of webpages.
In this article I will be talking about the components involved in box model and few pointers to keep in mind.

Introduction

'Box Model' represents the container that wraps around every HTML element. All the elements are essentially rendered as rectangular boxes by the browser rendering engine . For styling purposes , it is necessary to understand the four parts(areas) that makes up the Box Model - margins , borders , padding and content area.

Let us now learn more about these 4 areas in a little detail.

1. Content Area

This area contains the actual content of the element such as text , image.

2. Padding area

This area is the space between the 'real' content and borders around the element.

3. Border area

A border is used to enclose the content and padding of the element.

4. Margin area

Margin is generally used to clear out the area outside the border . It gives space between elements ouside border.

The Box Model can be accessed via chrome dev tools.

To learn more about css check out my personal favorite resource w3schools