box model -

CSS Box Model is a box that wraps around every HTML element.

When the HTML file is rendered on the browser, then browser renders each element as a rectangular box or a container because of this rendering property of the browser it is called Box Model.

CSS Box Model consists of:

content padding border margin

• content -

  This contains the actual content of the element such as texts, images which is displayed on the web page. Look at the below example for better understanding.

• padding -

  Padding is used to provide space around the content. We can provide padding from each side by using

padding-top padding-right padding-bottom padding-left

• Border -

The border CSS property is used to give styling to the element's border.

border-width border-style border-color

• margin

Margin is used to provide margin-area on all four sides of the element.

margin-top margin-right margin-bottom margin-left