2

Is there a way to have the padding on an element be added to the min-height value instead of being included in it? For example you have 10px of padding on the top and bottom a element and a min-height of 150px the height should be 170px instead of the element's height being 130px + 20px of padding.

I'm currently building a site using Material Design Lite and it adds padding to almost everything so it's a bit of a pain to have to always find the padding on something when you want to set a min-height value.

CJK
  • 952
  • 2
  • 10
  • 22
  • 4
    Sounds like a job for `box-sizing:content-box;`, since height shouldn't include padding in the default `content-box` model. That might break some things though, so be sure to test! – abluejelly Mar 24 '16 at 19:29
  • unfortunately MDL also uses `box-sizing:border-box` for pretty much everything as well so that method won't work :( – CJK Mar 24 '16 at 19:34
  • Have you tried removing the padding instead of trying to find it every time? [This answer goes over how specificity can help you set padding to 0 for Material Design Lite.](http://stackoverflow.com/a/31457156/5914723) – Danielson Mar 24 '16 at 19:43
  • Well.... if you don't mind having a [very narrow](http://caniuse.com/#feat=css-variables) browser support you could mod it to set the top/bottom padding via variables, and then ref the vars in `calc()` calls. Not sure if there's any other good ways without touching the DOM. – abluejelly Mar 24 '16 at 19:47
  • @DanAfterFiveCoffees I don't want to remove the padding since it's used to properly space material design elements and removing it would just create a different problem. – CJK Mar 24 '16 at 20:21

1 Answers1

4

I might be a little late, but setting box-sizing: content-box; on the element would solve the issue.

Mindaugas Jakubauskas
  • 146
  • 1
  • 5