CODEWITHSUNDEEP
htmlcsspadding
DaVince
DaVince

Reputation: 1064

CSS padding while retaining the defined size?

According to the standard, adding padding to a HTML element in CSS will grow the element by the amount defined. For example:

.elem {
  width: 100px;
  height: 100px;
  padding: 20px;
}

will add 20 pixels to the .elem's sides, causing the actual width and height to be 140px total.

Since this is actually pretty impractical in web design (having to calculate and keep track of the resulting sizes), I was wondering if it was somehow possible to do the reverse instead. I set a padding, and the inner text area shrinks instead. So the element stays at 100*100px, has the padding of 20px inside it, and I don't have to worry about messing up my design while experimenting with the padding.

Is this possible? Perhaps through a language that compiles to CSS (haven't looked into that much)? And perhaps a more minor question: why does it work this way in the first place?

Upvotes: 1

Views: 61

Answers (2)

David Thomas
David Thomas

Reputation: 253308

Use box-sizing:

elemSelector {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

This value for the property declares that the declared size of the element will include the border and the padding.

References:

Upvotes: 3

Vail DeGraff
Vail DeGraff

Reputation: 78

It is currently impossible to perform what you are after. You'll have to account for padding in total width before you attempt to define what your css 'width' value will be. For more information on this, see the CSS Box Model. This is the only method to guarantee correct sizing in all web-capable devices, CSS3 compatible and not.

Upvotes: 0

Related Questions