CSS Box Model and Styling

CSS Box model?

CSS box model typically describes how these rectangular boxes are laid out on a web page.

Although every body calls this the Box Model it is actually a rectangle having a width & height but no depth. All the HTML elements can be regarded as a 2 dimensional box. The Box Model diagram shows the areas that CSS styles are applied too.

The boxes content, text and or graphic images are in the centre of the box, which can be surrounded by padding, border and margin.

CSS Basic Box Model is a module of CSS that defines the rectangular boxes-including their padding and margin—that are generated for elements and laid out according to the visual formatting model.

The following diagram demonstrates how the margin, padding, and border CSS properties determines how much space an element can take on a web page.

Explanation of the different parts:

  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent

Width and Height of Elements

Usually when you set the width and height of an element using the CSS width and height properties, in reality you are only setting the width and height of the content area of an element. The actual width and height of the element's box depend on total height and total width factors.

Demonstrating the Box Model