CSS Box Model

Padding , Border , Margin ,content

Table of contents

No heading

No headings in the article.

The CSS box model is a very important thing to consider when we talk about the design and layout of our website. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model. Box-Model has multiple properties in CSS :- the content area, the padding, the margin, and the border.

  • Content Area:It IS just the area Where we displayed our content in the form of text , images , tables etc..We can use Height & width properties in css to increase its height and width properties.

  • Border:Border is the outside boundary of an element it is a line that surrounds the padding and content. The margin is the space between the border and the next element in the layout.

  • Padding:To be just simple it is just a space between our content i.e text,images,etc and the border.

  • Margin : Margin is similar to padding but is has a difference that it is used to create space around the border of particular element .