Margins & Images Issue

2019-07-14 03:37发布

问题:

for the life of me, i can't figure out why the margins won't render properly on some of the images here. After the first and second landscape orientation images, the margins overlap with the image/container above it.

Can anyone shed some light?

http://jsfiddle.net/JeffPannone/rDw6R/17/

*sorry everyone. I provided the wrong jsfiddle link previously. i corrected it here

回答1:

One option is to set overflow:auto to the div.

jsFiddle example



回答2:

The margin of you images can collapse out of the div because you div has no border or padding.

I was adding some W3C documentation, but it's a bit much to give you a clear description of margin collapse in a few lines. Just follow the link above for detailed information.

A simple fix would be adding a padding of 1px 0 to the div.

http://jsfiddle.net/rDw6R/1/



标签: html css margin