CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Box Model

Every element that can be displayed is comprised of one or more rectangular boxes.

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

These boxes can have different properties and can interact with each other in different ways, but every box has a content area and optional surrounding margin, padding, and border.

The CSS box model is essentially a box that wraps around every HTML element, it consists of:

The image below illustrates the box model:

Margin
Border
Padding
Content Area (Element)

Explanation of the different parts:

  • Content Area - This area consists of content like text, image, or other media content. It is bounded by the content edge and its dimensions are given by content box width and height.
  • Padding - It includes the element’s padding. This area is actually the space around the content area and within the border box. Its dimensions are given by the width of the padding-box and the height of the padding-box.
  • Border - It is the area between the box’s padding and margin. Its dimensions are given by the width and height of border.
  • Margin - This area consists of space between border and margin. The dimensions of Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors. The margin is transparent.

The box model allows us to add a border around elements, and to define space between/around elements.

Run code

Understanding Width and Height of an Element

In order to set the width and height of an element correctly, you need to know how the box model works.

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. To calculate the full size of an element, you must also add padding, borders and margins.

Assume we want to style a <div> element to have a total width of 400px:

Here is the calculation:

  370px (width)
  + 20px (left + right padding)
  + 10px (left + right border)
  + 0px (left + right margin)
  = 400px

The total width of an element should be calculated like this:

Total Width: width + padding-left + padding-right + border-left + border-right + margin-left + margin-right.

The total height of an element should be calculated like this:

Total Height: height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom.


Advanced box Manipulation

Beyond setting the width, height, border, padding and margin of boxes, there are following other properties available to change how they behave:

You will learn about these properties later in this tutorial.