How to change a DIV padding without affecting the width/height ?

html

responsive-design

best-practices

css

byAnton Shumikhin·Sep 21, 2024

To ensure padding doesn't alter the overall dimensions of your DIV, apply box-sizing: border-box;. This property includes padding and border in the element's total width and height:

.my-special-div {
  box-sizing: border-box;  /* Padding? No problem! */
  width: 300px;           /* Unchanging width */
  height: 200px;          /* Unchanging height */
  padding: 20px;          /* Padding, you're inside! */
}

The div remains a solid 300x200px on the outside, while the inside adjusts to accommodate the padding for your content.

Decoding the box-sizing property

The box-sizing: border-box; property tells the browser to count any border and padding within the width and height dimensions. The overall div size remains unchanged but padding gobbles up some interior content space.

The legacy browser lifeboat

Modern browsers have solid support for the box-sizing property. But if you find yourself strangled by legacy browser issues, the following prefixes are your lifebuoys:

.my-special-div {
  -moz-box-sizing: border-box;     /* Firefox, I see you */
  -webkit-box-sizing: border-box;  /* Hello Safari/Chrome */
  box-sizing: border-box;          /* The rest can follow */
}

Taking the scenic two-div route

While leveraging box-sizing is often the quickest route, there's another path. If you cannot, or prefer not, to change the box-sizing, establishing two divs can simulate the effect:

<div class="outer-div" style="width: 300px;">
  <div class="inner-div" style="padding: 20px;"> /* Inner peace, inside padding */
    The content shines here...
  </div>
</div>

Ensure that .inner-div doesn't have a set width to let the padding spread across the full width, making it a worthy border-box opponent.

Nitty gritties and best practices

Designing for the moving screen

When you design responsively, every pixel is precious. With border-box, your DIV stands guard maintaining its size when padding goes through changes. This makes responsive designing less of a pain in the pixels.

Entertaining dynamic content guests

If your splendid div hosts dynamic content - dancing to user interactions - using border-box empowers you to modify padding with greater predictability since the outer dimensions mount a stubborn defence.

The border-box isn't always the hero

Grid layouts: When dealing with CSS grid layouts, you may need to rethink the border-box strategy as the grid system may require a finer manipulation of margins and padding.
Flex children: border-box can sometimes clash with flex-grow and flex-shrink behaviour in flexbox layouts, throwing you a curveball. Always proceed with testing!