-1

I'm sure this is a basic question but how do I stack divs vertically with no borders? (0px) I'm trying to stack two images (For the time being) on top of one another but the images aren't touching completely, instead they have a spacing of 4px. I'm using display:block; float:left; and because I have a header above I'm also using top:-4px; which removes the 4px space between the header and top image, but not the image on the bottom, as well as position:relative; to move the entire contents of the page upwards. Using all the methods I happen to know of that removes the spaces by -4px only effects the top image, rather than all the images. Is there anything that can be done to fix this? Should I even be using divs or should I be using something else? Thanks!

ehlius
  • 3
  • 1
  • 1
    Please supply the code you're having trouble with, or we can't offer any concrete suggestions to help. Make sure that it's a [mcve]. Thanks! – Serlite Jan 12 '17 at 22:58

2 Answers2

0

Add this to the divs' css and see if it'll work:

margin: 0;
padding: 0;
ibrahim mahrir
  • 31,174
  • 5
  • 48
  • 73
0

Solution 1:

If the divs only contain images, just add font-size: 0 to the div CSS rule. This will remove the bottom space.

Solution 2:

Add vertical-align: bottom; to the img CSS

See both solutions in a codepen here: http://codepen.io/anon/pen/NdNQjw

Johannes
  • 64,305
  • 18
  • 73
  • 130