CSS Padding: the comfy space inside the box

Padding is the space inside an element, between its content and its border. If your content feels like it’s glued to the edge, padding is the polite little buffer that says, “hey, let’s give this some breathing room.”

  • Padding lives inside the element’s box (content → padding → border → margin).
  • Padding increases the clickable / background area (very useful for buttons).
  • Padding is part of the element’s visual box, so it can affect layout sizing. 
.card {
  padding: 0;
}
  
.card {
  padding: 22px;
}
  
.card {
  padding: 22px 34px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.card {
  border: 3px solid #111;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.card p {
  margin: 0;
  line-height: 1.45;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid #111;
  background: #f6f6f6;
  font-size: 12px;
}
  

  

    
Padding demo

    
Content that likes personal space

    

      Toggle the snippets. With padding, the content stops hugging the border.

Notice how padding doesn’t create space between this card and other elements. It creates space inside the card.

CSS Padding vs Margin

Padding and margin both create space, but they do it in different places:

  • Padding adds space inside an element, and the element’s background extends into that space.
  • Margin adds space outside an element, creating separation from neighbors.

A quick mental model: padding is “blanket inside the frame,” margin is “air around the frame.” 

.box {
  padding: 26px;
  margin: 0;
}
  
.box {
  padding: 0;
  margin: 26px;
}
  
.box {
  padding: 22px;
  margin: 22px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.stage {
  border: 3px dashed #111;
  border-radius: 18px;
  padding: 14px;
  background: #fff;
}

.row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.label {
  font-size: 13px;
  opacity: 0.8;
  margin: 0 0 8px;
}

.box {
  border: 3px solid #111;
  border-radius: 16px;
  background: #90e0ef;
  box-shadow: 0 10px 0 #111;
}

.box p {
  margin: 0;
  background: rgba(255, 255, 255, 0.65);
  border: 2px solid #111;
  border-radius: 12px;
  padding: 10px;
  line-height: 1.35;
}

.ghost {
  border: 2px solid #111;
  border-radius: 16px;
  background: #f6f6f6;
  display: grid;
  place-items: center;
  font-size: 13px;
  opacity: 0.85;
}
  

  

    

      

        
Target element

        

          
Content area (this white-ish panel) sits inside the box.

        

      

      

        
Neighbor element

        
I am the neighbor

When you switch to margin, the blue box moves away from its surroundings. When you switch to padding, the blue box stays put, but its content moves inward.

Learn more about margin in the CSS Margin Interactive Tutorial.

CSS Padding order, shorthand, and syntax

The padding family has two main ways to write values:

  • Longhand properties: padding-top, padding-right, padding-bottom, padding-left
  • Shorthand property: padding

Padding shorthand order (1–4 values)

Shorthand follows the classic clockwise rule: top, right, bottom, left.

  1. 1 value: padding: 20px; sets all four sides to 20px.
  2. 2 values: padding: 10px 30px; sets top & bottom to 10px, left & right to 30px.
  3. 3 values: padding: 10px 30px 50px; sets top 10px, left & right 30px, bottom 50px.
  4. 4 values: padding: 10px 20px 30px 40px; sets top 10px, right 20px, bottom 30px, left 40px. 
.demo {
  padding: 18px 36px 18px 36px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.demo {
  border: 3px solid #111;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
}

.demo .content {
  background: #90e0ef;
  border: 2px solid #111;
  border-radius: 14px;
  padding: 12px;
  line-height: 1.35;
}

.hint {
  margin: 0;
  font-size: 13px;
  opacity: 0.85;
}
  

  

    

      

        Use the sliders to control the four shorthand values:
        top right bottom left.

Padding top, left, bottom, right (one side at a time)

Longhand properties are great when you only want to affect one side. They also read very clearly in code reviews (and future-you will thank you).

CSS padding-top

padding-top adds space between the content and the top edge. It’s useful for giving headers breathing room without affecting the other sides. 

.panel {
  padding-top: 0;
}
  
.panel {
  padding-top: 28px;
}
  
.panel {
  padding-top: 48px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.panel {
  border: 3px solid #111;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
  padding: 18px;
}

.panel h4 {
  margin: 0;
  font-size: 16px;
}

.panel p {
  margin: 8px 0 0;
  opacity: 0.9;
}

.marker {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #f6f6f6;
  font-size: 12px;
}
  

  

    Top padding
    
Watch the top space grow

    
The rest of the padding stays the same.

CSS padding-left

padding-left pushes content away from the left edge. This is common in callouts, cards, and “left-border” style UI pieces. 

.panel {
  padding-left: 0;
}
  
.panel {
  padding-left: 28px;
}
  
.panel {
  padding-left: 52px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.panel {
  border: 3px solid #111;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
  padding: 18px;
  display: grid;
  gap: 8px;
}

.panel .stripe {
  width: 100%;
  height: 12px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #90e0ef;
}

.panel p {
  margin: 0;
  line-height: 1.4;
}
  

  

    

    

      The content slides right as padding-left increases.

CSS padding-bottom

padding-bottom adds space below the content. It’s handy when you want a “footer-ish” breathing zone without changing top/left/right. 

.panel {
  padding-bottom: 0;
}
  
.panel {
  padding-bottom: 28px;
}
  
.panel {
  padding-bottom: 56px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.panel {
  border: 3px solid #111;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
  padding: 18px;
}

.panel .bar {
  height: 18px;
  border: 2px solid #111;
  border-radius: 14px;
  background: #90e0ef;
}

.panel p {
  margin: 10px 0 0;
  line-height: 1.4;
}
  

  

    

    

      Increasing padding-bottom adds space under everything.

CSS padding-inline (logical padding)

Physical padding (padding-left / padding-right) is tied to left and right. Logical padding is tied to the inline direction of text.

  • padding-inline sets both inline sides (start and end).
  • padding-inline-start targets the “start” side of the line.
  • padding-inline-end targets the “end” side of the line.

Why care? Because writing direction can change. With direction: rtl;, “start” becomes the right side, and “end” becomes the left side. Logical padding follows that automatically. 

.card {
  direction: ltr;
  padding-inline: 40px;
}
  
.card {
  direction: rtl;
  padding-inline: 40px;
}
  
.card {
  direction: rtl;
  padding-inline-start: 64px;
  padding-inline-end: 16px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.card {
  border: 3px solid #111;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
  padding-block: 18px;
  display: grid;
  gap: 10px;
}

.card .chip {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #f6f6f6;
  font-size: 12px;
  width: fit-content;
}

.card p {
  margin: 0;
  line-height: 1.4;
}

.note {
  margin: 0;
  font-size: 13px;
  opacity: 0.85;
}
  

  

    Logical padding
    

      This paragraph stays comfy on the inline axis, even when direction flips.
    

    

      Switch snippets: ltr vs rtl changes which side is “start.”

If you build components that might be used in right-to-left languages, logical padding is a big win.

CSS padding color (the truth is… it’s not a property)

There is no padding-color property in CSS. Padding doesn’t have its own paint layer.

Instead, the padding area shows the element’s background. So when people say “padding color,” what they usually mean is: “the background that appears in the padding area.”

  • Change background (or background-color) to change what the padding looks like.
  • If the background is transparent, you’ll see whatever is behind the element. 
.card {
  padding: 26px;
  background: #90e0ef;
}
  
.card {
  padding: 26px;
  background: transparent;
}
  
.card {
  padding: 26px;
  background: linear-gradient(135deg, #90e0ef, #fff);
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.backdrop {
  border: 3px solid #111;
  border-radius: 18px;
  padding: 18px;
  background: url("https://picsum.photos/1200/700") center / cover no-repeat;
}

.card {
  border: 3px solid #111;
  border-radius: 18px;
  box-shadow: 0 12px 0 #111;
}

.card .inner {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #111;
  border-radius: 14px;
  padding: 12px;
}

.card h4 {
  margin: 0 0 8px;
  font-size: 16px;
}

.card p {
  margin: 0;
  line-height: 1.4;
}
  

  

    

      

        
Padding “color” is just background

        

          Toggle snippets and watch the padding area: solid color, transparent, or gradient.

The background paints behind the content and into the padding area (and under the border too, depending on background clipping). So your “padding color” is really just your background doing its job.

Learn more about backgrounds in the CSS Background Interactive Tutorial.

Common padding gotchas and beginner-friendly tips

Padding can change element size (unless you use border-box)

By default (box-sizing: content-box;), width and height apply to the content box, and padding gets added on top of that. That can make things bigger than you expected.

A common modern approach is to set box-sizing: border-box; so padding is included in the declared width. You’ll see that used in the default CSS of the code playgrounds on this tutorial. Whatever project you are working on, you are probably already using box-sizing: border-box; globally.

Percentage padding is based on the element’s width

This one surprises a lot of beginners: padding-top: 10%; is based on the element’s width, not its height. This behavior is useful for responsive tricks (like keeping aspect ratios), but it can be tricky at first.

Padding on inline elements behaves differently

Inline elements (like <span>) can have padding, but vertical padding can look a bit strange, because inline layout isn’t “boxy” in the same way block layout is. If you’re making pill-shaped UI, consider using display: inline-block;. 

.tag {
  display: inline;
  padding: 12px 18px;
}
  
.tag {
  display: inline-block;
  padding: 12px 18px;
}
  
.tag {
  display: inline-block;
  padding: 6px 14px;
}
  
*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.stage {
  border: 3px solid #111;
  border-radius: 18px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
}

.tag {
  border: 2px solid #111;
  border-radius: 999px;
  background: #90e0ef;
  font-weight: 600;
}

p {
  margin: 0;
  line-height: 1.6;
}
  

  

    

      Here is a padding tag sitting inside a sentence.
      Toggle snippets to compare inline vs inline-block.

Recap

  • Padding creates space inside an element (content breathing room).
  • Margin creates space outside an element (separating neighbors).
  • Shorthand order is top right bottom left, with 1–4 value patterns.
  • Longhands like padding-top, padding-left, and padding-bottom target individual sides.
  • padding-inline is the writing-direction friendly version of left/right padding.
  • padding-block is the writing-direction friendly version of top/bottom padding.
  • There is no “padding color” property; the padding area shows the element’s background.