CSS Box Model

What is Box-Model?

The CSS box model is a container that contains multiple properties including borders, margin, padding and the content itself. It is used to create the design and layout of web pages.

• Width — Every element has some default width based on the display property. If it is a block-level element it will have 100% width covering whole horizontal space.
• Height — As every element has some default width in a similar way every element also has some default height and that is always determined by its content.
• Padding —Padding comes after width and height and falls inside the element’s border.
• Border —The border is to provide some outline around an element.
• Margin —The margin property is very similar to padding. But space instead of applying inside the element it is being applied outside the element.

Block Vs Inline Vs Inline-Block

Block Level

Block-Level elements accept all the box-model(which we will discuss soon) properties and values. To convert any element into a block-level element we just need to change its display property.

span {
    display: block;
  }

By default, span is inline-level elements but now as we have changed its display property now it will behave like block-level elements and it will accept all the box-model properties and values.

Inline Level

To make any element behave like inline-level elements we can change its display properties.

p {
    display: inline;
  }

By default, p is a block-level element but now it will behave like an inline-level element because we have overwritten its display property.

An inline-level element does not accept all the box-model properties and values. So we have another display property value i.e. inline-block.

p {
    display: inline-block;
  } 

Inline-Block Level

With the inline-block value, we can make the element behave like inline-level, But at the same time, it will also accept all the box-model properties like block-level elements.

p {
    display: inline-block;
  }

Calculating the width and height of an element.

Total width:

marging-left + border-left + padding-left + width + padding-right + border-right + margin-right

Total Height:

marging-top + border-top + padding-top + width + padding-bottom + border-bottom + margin-bottom

Box Sizing

The CSS Box Sizing property allows us to include the padding and border in an element's total width and height. Without using the box-sizing property when you set the width/height of an element, the element often appears bigger than you have set (because the element’s border and padding are added to the element’s specified width/height).

Content Box

Content box is the default value for the box-sizing property. The element often appears bigger

div {
    box-sizing: content-box;
  }

Border Box

If you set box-sizing: border-box; on an element padding and border are included in the width and height:

div {
    box-sizing: border-box;
  }

Outline

CSS outline is just like CSS border property. It facilitates you to draw an extra border around an element to get visual attention. The outline is similar to a border but stays outside the border

div {
    outline: 4px solid red;
  }

Box Shadow

The box-shadow CSS property adds shadow effects around an element.

div {
box-shadow: 2px 2px 6px 1px red;
}

The property generally accepts five values. The first four values are for creating length and height of shadow and the last value is for the color of the shadow.

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

We can also create a shadow in the opposite direction by providing negative values and can also create multiple shadows on one element.

To create multiple shadows just need to add comma-separated values.

div {
    box-shadow: 2px 2px 6px red, 4px 4px 8px blue;
  }

Thanks

Twitter — https://twitter.com/dasjideepak