CSS Box Model

To understand how CSS works on HTML elements, you need to understand the CSS Box Model . The Box Model means that every element that you place in your web page is considered a box when CSS is applied to it.

Each element rendered on a webpage is surrounded by an imaginary box identified by four sides left, right, top and bottom. CSS allows controlling CSS properties Border, Margin and padding on all these four sides.

This box represents the content of the element surrounded by margins, padding and borders on all the four sides.  The complete web page also follows the CSS Box Model. All the elements defined in HTML which represent some visible content of the page are considered as boxes. These are paragraph, table, image, headings, span, div, form, and all the form elements. So, we can say that an HTML page is a container box that contains one box each for every element added.

The border is the outline of the CSS box with element. The Margin property is the distance or border of the element from borders of its neighboring elements. The Padding property is the distance between the content of the element from the border of the element box.

CSS Box Model

By using the desired side name you can control the values of these properties along with your required side. That also implies that you can apply different color or style to all borders of an element. You can set different padding and margin values for all the four sides of an element. This gives you a lot of flexibility to make you pages more presentable.

Consider this example. If you write some text in <P>, the paragraph tag, then its text is taken as content in the paragraph. CSS Box Model considers this text of paragraph tag in a box with invisible borders by default. The border can be shown by setting its style as ‘SOLID’. Padding is defined as the space between the border and the text of the paragraph. If you have another paragraph above or below this paragraph then margin is the space between borders of the CSS boxes of these paragraphs.