2

Demo. I have a div with an img in it and another div with no image meant to be a placeholder but they don't line up. My html shows all the div's halfway down except the last. The demo shows the problem but it doesn't look as bad.

Html:

<div class="profile-pics">
    <div class="pic-thumb-box"><img src="http://i.imgur.com/EclNgPI.jpg" class="pic-thumb" /></div>
    <div class="pic-thumb-box"><span class="pic-thumb"></span></div>
</div>

CSS:

.profile-pics {
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top
}
.pic-thumb-box {
    width:  250px;
    height: 250px;
    border: 1px solid;
    background: #555;
    display: inline-block;
    position:relative;
}
.pic-thumb {
    width:  240px;
    height: 240px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
}

3 Answers3

1

The reason for this behavior is that your .pic-thumb-box elements are containing .pic-thumb elements of different types. Your <img> element is going to behave as an inline-block display by default, but the <span> element will behave as an inline display. This prevents the .pic-thumb class from applying width and height to the <span> element. If you add display: inline-block; to your .pic-thumb class as suggested in another answer, you'll be able to apply height and width to your <span> element and fix your misalignment.

hopkins-matt
  • 2,763
  • 2
  • 15
  • 23
1

To remove the space around your img, you could add "display: inline-block;" to the class .pic-thumb. 

.pic-thumb {
    width:  240px;
    height: 240px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
    display: inline-block;
}

see https://jsfiddle.net/mxevk9q6/2/

Regards Andy

AndyCoder
  • 31
  • 3
0

Add

display: inline-block;

to your .pic-thumb{....}. That will fix it

Richard
  • 138
  • 1
  • 1
  • 9