CSS Padding Property: Complete Guide with Syntax and Examples

Introduction
CSS padding property
Padding order
Negative Padding
Constituent properties
Padding on Inline elements
Frequently Asked Questions(FAQ)

INTRODUCTION

The outline-style property sets the style of the outline around an element. Outlines are lines drawn outside the element’s border edge, and they do not take up space (unlike borders).

Possible values

The outline-style property can be specified in the following types.

Value	Description
`none`	No outline (default if not specified).
`solid`	A single solid line.
`dotted`	A series of dots.
`dashed`	A series of short dashes.
`double`	Two solid lines.The width of outline is the sum of the two lines and the space between them.
`groove`	3D grooved outline (looks carved).
`ridge`	3D ridged outline (looks raised).
`inset`	Looks like the element is embedded.
`outset`	Looks like the element is coming out of the page.
`auto`	Browser chooses the style (often for accessibility focus outlines).

Examples

The following figures shows all the possible styles of the outline-style property can take. The width and color of outline had been specifically set to 9px and violet respectively to enable user to clearly see the various styles.

1. solid

This example of solid outline

2. dotted

This example of dotted outline

3. dashed

This example of dashed outline

4. double

This example of double outline

5. groove

This example of groove outline

6. ridge

This example of ridge outline

7. inset

This example of inset outline

8. outset

This example of outset outline

9. auto

This example of auto outline

Frequently Asked Questions (FAQ)

How do I prevent the padding property from changing width or height in CSS?

When you add padding in CSS, it normally increases the size of the element because padding is added inside the element’s box by default. To prevent padding from changing the element’s width or height, use:


box-sizing: border-box;

By default, CSS uses box-sizing: content-box, which means: width and height only include the content. Padding and border are added outside of that, increasing the final size.

Using box-sizing: border-box; changes the box model so that: width and height include the content, padding, and border. The total size stays fixed, no matter how much padding or border you add.

Can We Define max-padding or min-padding in CSS?

No, CSS does not currently support max-padding or min-padding properties directly — unlike min-width, max-width, min-height, and max-height.

CSS treats padding as a single-value property, not a size constraint like width or height. The CSS box model doesn’t allow setting limits on padding values directly.

What does padding:10px, 15px, 12px, 20px; mean?

It sets the padding for all four sides of the element using the four-value shorthand in clockwise order:

It is same as
padding-top: 10px;
padding-right: 15px;
padding-bottom: 12px;
padding-left: 20px;

What units can be used for padding in CSS?

Here's a list of all the units that can be used for padding in CSS:

Absolute Length Units - px, pt, pc, in, cm, mm, Q

Relative Length Units - em, rem, ex, ch, lh, rlh

Viewport Units - vw, vh, vmin, vmax

Percentage Unit - %

What is the default padding in CSS?

By default, the padding of most HTML elements is: 0 (zero) No padding is applied by default to elements like div, span, section, etc. Some elements appear to have space (like body, ul, h1), but that's usually margin, not padding.

Can I Add Background Color Only for Padding in CSS?

Not directly. In CSS, the background-color applies to the content + padding area — but not just the padding alone. You can use some Workarounds to Target Only the Padding Area

example:


<div class="outer">
  <div class="inner">Text</div>
</div>

.outer {
  padding: 20px;
  background-color: lightblue;
}

.inner {
  background-color: white; /* Covers the content area */
}

Does CSS Padding Collapse Like Margin?

No, padding does not collapse in CSS. In CSS, margin can collapse — especially vertical margins between elements — but padding never collapses.

Can You Use padding: auto in CSS?

No, padding: auto does not work as you might expect. The auto value is valid for some CSS properties like margin, width, left, or right, but not for padding. When you set padding: auto, most browsers will treat it as 0 — it has no effect.