Prevent padding from increasing size

Here’s a sample:

div {
  height: 0;
  overflow: hidden;
  padding: 12px;
  background: tan;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

DEMO

Is there a way to prevent padding from increasing the size of the div ? Some threads suggest using box-sizing: border-box , but it doesn’t seem to work in this case.

No height on its own (with overflow:hidden) will not hide padding or borders in either box model.

It all depends on what you are trying to do?

If you are just hiding the element there are many options.



  clip-path:circle(0);

The above will hide the element but will not make it go away. There are many other techniques depending on use case.

Just setting a zero height will do nothing to the padding because the padding is part of the box.

What is it that you require the box to do that you can’t simply remove the padding :slight_smile:

1 Like

The border-box model will stop padding increasing the height but padding will still create space when there is no height. If the height in your example was 24px then the elements overall height would stay exactly the same as it is now using the border-box model. However in the normal box model the elements overall height dimensions would be 48px.

1 Like

Actually I’m looking for a padding replacement/alternative: something that increases the space between the border and content.

Unless I know the reason why you are doing this I will not be able to give the answer you require?

I can see no logical reason not to use padding if you want padding ? :slight_smile:

You could of course apply margins to inner elements instead assuming you have some (which semantically you should have ).

You could also use wide transparent borders to make space but without knowing your use case I am just guessing :slight_smile:

OK, consider such a scenario. I can’t seem to add padding programmatically. It needs to be already there.

Ok thanks :slight_smile:

As I mentioned above your content needs to be semantic so text inside a div is not semantic at all. You need this structure.


<div id="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Now you can simply add the padding onto the p element instead.

Of course you shouldn’t use fixed heights if you are adding text that wraps as the height will vary with screen size. You should use rems anyway in case the user resizes the text.

If you can’t add the p element then add the padding only when open.

e.g.

2 Likes

It doesn’t look good, so I go for your first suggestion.

1 Like

Yes the first suggestion is more semantic as text should be in a paragraph.

However you could do this if you don’t want the extra element

You could still change it to a div if you had other content and it avoids the top and bottom padding issues.

Off-Topic: Make sure you take care of resize if the elements height is to change with text content etc.

1 Like

I had a bit of spare time and put up a demo with this working.

It does complicate matters a lot but is necessary otherwise no one can resize the screen.

2 Likes

Thanks for the complete version. :pray:

2 Likes

It’s a quiet day so I added a version that handles multiple elements.

Just for fun :slight_smile:

2 Likes

You’re quite an advisor, and a CSS god! We really appreciate your time and efforts on this forum. :heart:
By the way, happy new year! :rose:

4 Likes

I second that.

2 Likes