CSS Box model (box models)

CSS Box model (box models) I. INTRODUCTION

All HTML elements can be thought of as boxes, and in CSS, the term "box model" is used for design and layout.

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, which include: margins, borders, padding, and actual content.

The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

The following picture illustrates the box model:

Description of different parts:

• margin (margin) -clears the area outside the bounding rectangle and the margin is transparent.
• Border (border) -a border around the inside margin and outside the content.
• Padding (inner margin) -clears the area around the content and the padding is transparent.
• Content-The contents of the box, displaying text and images.

In order to correctly set the width and height of the elements in all browsers, you need to know how the box model works.

Ii. width and height of elements

Important: When you specify the width and height properties of a CSS element, you simply set the width and height of the content area. To know that full-size elements, you must also add padding, borders, and margins ...

The total width of the elements in the following example is 300px:

{    width: 300px;     Border: 25px solid Green;     padding: 25px;     margin: 25px;}

Effect:

CSS Box model (box models)