Understanding Width Height Margin and Padding

Every HTML element is rendered as a rectangular box. The CSS box model describes the four layers that make up this box from inside out: content → padding → border → margin.

width and height set the dimensions of the content area. By default, padding and border are added on top of this size.

padding is transparent space inside the border, between the content and the border edge. It is part of the element's clickable/background-painted area.

Each side can be set individually:

margin is transparent space outside the border. It pushes other elements away. Negative margins pull elements closer or overlap them.

Vertical margins collapse between adjacent block elements: the actual gap is the larger of the two margins, not their sum. Horizontal margins never collapse.

Margin collapse is prevented when:

• Elements are flex or grid children
• A parent has overflow: hidden
• A parent has padding between parent and first child
• An inline element separates the siblings

Setting horizontal margins to auto on a block element with a fixed width centers it within its container. This is the classic centering technique.

Constrain dimensions with minimum and maximum bounds to keep elements readable across screen sizes:

In the default content-box model, total width = width + padding-left + padding-right + border-left + border-right. This can be surprising and is why border-box is preferred.

Modern CSS offers logical equivalents: margin-block, margin-inline, padding-block-start, etc. These adapt to writing direction automatically.

The box model layers are content, padding, border, and margin. Padding is inside the border; margin is outside. Vertical margins collapse between adjacent siblings. Use margin: 0 auto with a fixed width to center block elements.