How do I get stacked inline-block divs to touch the div above it?

Asked Apr 20 '20 at 22:27

Active Apr 20 '20 at 22:27

Viewed 24 times

I have a bunch of divs each with a random height but the same width arranged in a container. I set the vertical-align : top to make sure that each div is aligned to the top of the container but there are still spaces between the divs and the one's beneath it. I would like all the divs to touch each other.

HTML:

<div className="interestoptions" onClick = {(event) = {this.interestClicked(event);}}></div>

CSS:

`.interestoptions{
      width: 30%;
      display: inline-block;
      border-radius: 5px;
      border: 1px solid whitesmoke;
      vertical-align: top;
    }`

asked Apr 20 '20 at 22:27

Opp

1

There's no way you looked at that picture you included. – Rainbow Apr 20 '20 at 22:32
What do you mean? – Opp Apr 20 '20 at 22:32
1

not everyone can clearly see a whitesmoke over a white coloration – Temani Afif Apr 20 '20 at 22:33
Include the markup – Rainbow Apr 20 '20 at 23:00

How do I get stacked inline-block divs to touch the div above it?

0 Answers0