Padding/Margin/Border On Element Does Not Change DIV Height

Question

Here is a very simply jsFiddle to demonstrate my problem: http://jsfiddle.net/ryandlf/mSmUv/4/

When an element has a top padding or margin and it sits on the first line within a div, the div does not respect that padding or margin and push the element down. In most cases this isn't an issue, but for example, if I have a button that has a top border and padding the top of the border will be cut off because the div is not taking into consideration the padding value.

Is there a workaround for this other than just blindly setting margins or padding on every container div element and hoping I have added enough to account for any internal element that might be affected?

Answer 1

your link with class button is not a block element, it is inline element. Change this default behaviour by adding dispaly: block to it and it will work as expected. Proof available on jsfiddle.

So to sum up, the problem is not with the div - it is the problem with css - inline elements ignore margin and padding because they cannot 'reserve space'.

UPDATE: To answer your comment, here is the solution you might be looking for

Answer 2

The button element is inline. To get the desired behavior you can set display:inline-block. Check here

Answer 3

Try to add following to the parent div:

overflow: hidden

I hope it helps!