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

html

responsive-design

css-box-model

layout-design

byAnton Shumikhin·Dec 26, 2024

Applying box-sizing: border-box; is a direct solution to keep padding from affecting an element's width and height:

.element {
  box-sizing: border-box; // Your secret weapon
  width: 100px;
  height: 100px;
  padding: 20px; // Won't touch the size. Stay, padding, stay! Good boy.
}

You see that? The width and height wisely stay quite stubborn at 100px, thanks to box-sizing: border-box;.

Understanding the box-sizing property

The box-sizing property is the overseer of element dimension calculations in CSS. Its default value, content-box, doesn't count padding or borders into an element's size. Switching to border-box, however, commands the browser to include padding and border within the width and height you set.

Alternatives? Yes, please!

Margins to your rescue

Hey there, got some space-need around your element? No worries, pal, margin is more than happy to help. It'll create space without messing up your element size.

Text-indent, your text spacer

Indenting text within a div without nudging its width? Watch text-indent do some magic. It leaves the div width alone and just moves the text.

Smarter layouts with nested divs

Craft complex layouts with nested divs set to width: auto; and margin-left or margin-right. Presto! You just made indirect padding, keeping the reins on width.

Global effect of box-sizing

The universal magic spell

Being a universal perfectionist? Consider box-sizing: border-box; as your thing. Apply it globally with our friend: universal selector *. This ensures every element in your layout stays in line.

* {
  box-sizing: border-box; // Behave, children!
}

The wise coder knows the box model

For all you smart coders, a deep dig into the CSS box model and box-sizing property can help no end. Armed with this knowledge, you can bid goodbye to unwanted layout issues and welcome predictable designs.

Layout and design aftermath

Consistently same element size

Prefer a sing-song routine in your layout design? box-sizing: border-box; loves consistency. Apply it throughout your design. It'll keep all elements at a consistent size and suddenly controlling your layout doesn't seem like trying to herd cats!

Maintaining artistic integrity

Keeping the design intact is vital. Use border-box to add padding and borders with no fear of distorting your design. After all, your layout isn't playdough.

explain-codes / Html / How do I prevent the padding property from changing width or height in CSS?

Linked

Why does CSS padding increase size of an element?



Input with display:block is not a block, why not?



Html input textbox with a width of 100% overflows table cells



How can I make a TextArea 100% width without overflowing when padding is present in CSS?



How to get equal width of input and select fields

