Padding in CSS - Browser Rendering Trace

Render Flow - Padding

[Parse CSS] -> [Match selector] -> [Calculate specificity] -> [Apply padding property] -> [Recalculate box size] -> [Layout update] -> [Paint padding area] -> [Composite]

The browser reads the CSS, finds elements matching the selector, applies the padding values, recalculates the element's box size, updates layout, paints the padding area inside the element's border, and composites the final image.

Render Steps - 3 Steps

Code Added:<div class="box">Content</div>

Before

→

After

[box]
|Content|
[-----]

The div element with class 'box' is added, showing the content with no styling or spacing.

🔧 Browser Action:Creates DOM node for div with text child

Code Sample

A blue box with a navy border and space inside the border created by padding around the content.

CSS

<div class="box">Content</div>

CSS

.box {
  width: 10rem;
  height: 4rem;
  background-color: lightblue;
  padding: 1rem;
  border: 0.2rem solid navy;
}

Render Quiz - 3 Questions

After applying step 3, what visual change do you see inside the box?

A The content moves inward, away from the border

B The border disappears

C The box shrinks in size

D The background color changes

Common Confusions - 3 Topics

Why doesn't padding add space outside the border?

Padding adds space inside the border, between the border and the content. Space outside the border is controlled by margin.

💡 Padding = inside border; Margin = outside border (see render_step 3)

Why does the box size stay the same even after adding padding?

By default, the box's width and height include only content size. Padding adds space inside, so the total box size grows unless box-sizing is changed.

💡 Padding increases box size unless box-sizing: border-box is used (related to render_step 3)

Why can't I see padding on an inline element?

Inline elements only add horizontal padding visually; vertical padding does not affect layout as expected. Padding works best on block or inline-block elements.

💡 Use block or inline-block to see full padding effect

Property Reference

Property	Value Applied	Affected Box Area	Visual Effect	Common Use
padding	length (e.g., 1rem)	Inside border, around content	Adds space inside the element's border	Separate content from border visually
padding-top	length	Top inside border	Adds space above content	Adjust vertical spacing
padding-right	length	Right inside border	Adds space to the right of content	Adjust horizontal spacing
padding-bottom	length	Bottom inside border	Adds space below content	Adjust vertical spacing
padding-left	length	Left inside border	Adds space to the left of content	Adjust horizontal spacing

Concept Snapshot

Padding adds space inside an element's border around its content. Default box size excludes padding, so padding increases total size. Use padding, padding-top, padding-right, padding-bottom, padding-left to control sides. Padding does not affect margin or space outside the border. Works best on block or inline-block elements for full effect.