A web page can be imagined as a combination of one or more rectangular boxes with different Heights, widths, Margins, Padding and Border values.

CSS-Box Model

The CSS box model explains how each box's Heights, widths, Margins, Padding and Border values are set.

Let's learn each characteristic thoroughly.

Content

The element's actual content may be text, photos, or videos.

Margin

The area between an element's border and its surrounding components. Moreover, margins can be configured to be a certain size or proportion of the element's width or height.

https://codepen.io/nandinichhajed/pen/ExebBNw

Padding

The distance between an element's border and its content. A particular size for the padding may be chosen, or it can be calculated as a percentage of the element's width or height.

https://codepen.io/nandinichhajed/pen/vYzWqWb

Padding and margin can be applied to each side individually, Refer to the following syntax for stand-alone sides:

body{
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;

    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
}

div{
    /* includes all four sides top right bottom left*/
    padding: 5px;
    margin: 2px;
}

div{
    /* top right bottom left */
    padding: 5px 2px 6px 8px;
    margin: 2px 5px 1px 2px;
}

div{
    /* top-bottom right-left */
    padding: 5px 8px;
    margin: 2px 5px;
}

Border

The line that frames the element's padding and content. Borders may be customized in terms of size, look, and colour.

https://codepen.io/nandinichhajed/pen/yLxPdEb

some of the common properties of borders are:

div{
    border-radius: 5px;
    border: 1px solid #5f5f5f;
 /* border: border-width border-style border-color|initial|inherit; */
}

Height

The height of an element can be calculated as height + padding-top + padding-bottom + border-top + border-bottom

https://codepen.io/nandinichhajed/pen/poOdXQP

Width

The width of an element can be calculated as width + padding-left + padding-right + border-left + border-right

https://codepen.io/nandinichhajed/pen/QWVOXVK

Display

The display property in CSS is used to control how an HTML element should be displayed on the web page. It can take various values, including:

block: The element will take up the full width available on the web page and will be displayed on a new line.
inline: The element will only take up as much width as necessary and will not force a new line.
inline-block: The element will take up as much width as necessary and will be displayed on the same line as other inline or inline-block elements.
none: The element will not be displayed at all.
flex: The element will become a flex container and its children will be positioned as flexible items.
grid: The element will become a grid container and its children will be positioned as grid items.
table: The element will be displayed as a table.
inline-table: The element will be displayed as an inline table.
list-item: The element will be displayed as a list item.

Difference between the Block and Inline element

Elements that are displayed on a web page differ based on their default behaviors and characteristics for block-level and inline elements.

Block	Inline
Block-level items are shown on a new line and take up the whole width of the webpage.	Inline components do not force a new line and just occupy the space that is required.
Create a rectangular box on the page.	Flow alongside other content.
The width and height of block-level items may be changed using CSS attributes like width and height.	The size of inline elements is decided by the text they contain and is not governed by their width or height.
Inline and block-level components can both be contained within block-level elements.	The only things that inline elements can include are text and other inline components.
Some common block-level elements include `<div>`, `<p>`, `<h1>-<h6>`, `<ul>`, `<ol>`, `<li>`, `<table>`, and `<form>`	Some common inline elements include `<span>`, `<a>`, `<img>`, `<strong>`, `<em>`, and `<input>`.

Explore CSS-Box Model

For developing attractive and well formatted web pages, understanding the CSS box model is essential.

Table of contents