CSS padding vs. margin?

Question

I've got one

box with content in it. It's margin and padding is 2em all round. Inside that

box, I have another smaller

box with content in it.

My problem is that I want the second

box to have the same alignment on the top and right side as the main

, and keep its unique margin on the bottom and left so it can push the text from the main

away from itself like I want it to. However, the padding value on the main

is keeping me from aligning the smaller

with the top and right sides of the main one. The smaller

does not go all the way to the bottom, so text from the man

will still go under the smaller one. So that is prentng me from doing something like padding-right:0 on the main

CSS.

What can I do?

ps I tried using position:absolute, and while that positioned the smaller

like I wanted to, I couldn't apply the margin rule and it would simply go over the top of the text beneath it.

5 answers

you can give your second div a minus margin on the left

margin : 0 0 0 -2em

that will sink it into the padding of the surrounding div

alternatively you can use no padding on the divs but give your div content a margin - that's my preferred route as it's a bit more cross browser compatible

Remember that depending on the browser and on the manner in which the div is defined, margin may show up on the OUTSIDE of the div and padding may show up on the INSIDE of the div

A 30px distinction in width seems surprising to me. Margin on the left: +10px Margin on the properly suited: +10px Padding on left: +5px Padding on surprising: +5px All at the same time, 30 pixels are extra to the width. keep in mind they are purely speaking approximately width here. in case you count selection all 4 aspects, the area extra is 60px entire, yet this is 30px vertical top and 30px horizontal width.

Try floating the inside div to the right or left.

float: right;

Have you tried just setting the padding-left and padding-bottom css styles instead of the more general padding style?

Answer 1

you can give your second div a minus margin on the left

margin : 0 0 0 -2em

that will sink it into the padding of the surrounding div

alternatively you can use no padding on the divs but give your div content a margin - that's my preferred route as it's a bit more cross browser compatible

Answer 2

Remember that depending on the browser and on the manner in which the div is defined, margin may show up on the OUTSIDE of the div and padding may show up on the INSIDE of the div

Answer 3

A 30px distinction in width seems surprising to me. Margin on the left: +10px Margin on the properly suited: +10px Padding on left: +5px Padding on surprising: +5px All at the same time, 30 pixels are extra to the width. keep in mind they are purely speaking approximately width here. in case you count selection all 4 aspects, the area extra is 60px entire, yet this is 30px vertical top and 30px horizontal width.

Answer 4

Try floating the inside div to the right or left.

float: right;

Answer 5

Have you tried just setting the padding-left and padding-bottom css styles instead of the more general padding style?