Every HTML element is its own box – with its own spacing and a border. This is called the Box Model.

In the CSS box model, every HTML element is treated as a box with four areas.

Imagine you receive a box from your favorite online retailer -- the content is the item in the box, or in our case, a header, paragraph, or image element.

The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it.

Think of the border like the cardboard box your item was shipped in.

Margin is the area outside of the box, and can be used to control the space between other boxes or elements.

Use padding to adjust the spacing within an element.

Use margins to adjust the spacing outside of an element.


The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary

Center the elements by setting its margin to auto.

It's helpful to have your margins push in one direction.

The filter property defines visual effects (like blur and saturation) to an element (often <img>).
                                                                                     
The CSS box-shadow property is used to apply one or more shadows to an element.
                                                                                     
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.