What is padding?

CSSJunior~1 min read

padding is the inner spacing between content area and border. It creates space inside the element, pushing the content away from its edges.

Structure for reference:

javascript

margin → border → padding → content

Features:

it is part of the Box Model
increases the element's visual size with box-sizing: content-box
has no separate background, the background extends through content and padding up to the border

Example:

css

div {
  padding: 20px;
}

In this case, the block's content will be inset by 20px on all sides.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.