0

I simply want to add two pictures in a row.

I use display: inline-block; which means my images should go in a row because when I say inline-block; they aren't block elements therefore a newline won't be added after the image is rendered. Makes sense, right?!

However it doesn't work.

body {
  padding: 0;
  margin: 0;
}

img {
  display: inline-block;
  width: 30vw;
  margin-left: 10vw;
  margin-right: 10vw;
}
<body>
<div>
<img src="http://www.gaiawellnessretreat.com/sites/default/files/field/image/portfolio_8.jpg">
<img src="http://www.gaiawellnessretreat.com/sites/default/files/field/image/portfolio_8.jpg">

</div>
</body>

EDIT: This is NOT a duplicate and it is NOT solved.

Adding a hack like font-size: 0 in div does not solve it.

CupOfCoffee
  • 79
  • 6
  • 2
    30% viewport width + 20% viewport margin + whitespace > 50% (and even at exactly 50%, there might be rounding?) – Ry- Apr 25 '18 at 01:15
  • This is a duplicate of about 50 other questions asking why two div's at 50% wrap because of whitespace. – caesay Apr 25 '18 at 01:15
  • @Ry︁ whitespace from where? – CupOfCoffee Apr 25 '18 at 01:16
  • @CupOfCoffee: The newline. If instead of ``, you had a word, you would expect a space between them, no? That space is still there when they’re images. – Ry- Apr 25 '18 at 01:16
  • @Ry︁ Horizontal space after every word? I put my spaces for words myself. Imagine how annoying it'd be if the computer tried guessing what I want to do and was inserting space and I had to use a special command to tell it this time don't do it. :) – CupOfCoffee Apr 25 '18 at 01:23
  • @CupOfCoffee See my answer below. It's the whitespace from your margins. – Michael Elliott Apr 25 '18 at 03:35

0 Answers0