Question

<div class="flex-33">      
      <div class="menu-container">
        <img class="menu-image" src="img/bocadillobody.png" alt="Sandwitch">
        <div class="menu-description">
         <h4>Sandwitch</h4>
         <p>Powder marshmallow marshmallow brownie carrot cake candy bonbon. Sweet sugar plum gummies caramels tart carrot cake tiramisu cheesecake. Cheesecake biscuit jelly beans. Jelly-o icing chocolate macaroon.   </p>
      </div>
    </div>          
</div>

Can some one please help me to eliminate white space between two divs img and .menu-description please?

I reckon in last 3 hrs I tried all what was explained here, but only had partial luck, where white-space disappeared, but reappeared on changing browser width.

Answer 1

Remove all padding and margin from the image, as well as the div. Make sure you set the height and width of your image. If you don't, and the image is wider than it is tall, it may be taking up extra space vertically.

Answer 2

because img is an inline level element, set the img to display:block to became a block level therefore that whitespace is removed.

.flex-33 div {
  border: red solid 1px
}
img {
  display: block
}

<div class="flex-33">
  <div class="menu-container">
    <img class="menu-image" src="//lorempixel.com/100/100" alt="Sandwitch">
    <div class="menu-description">
      <h4>Sandwitch</h4>
      <p>Powder marshmallow marshmallow brownie carrot cake candy bonbon. Sweet sugar plum gummies caramels tart carrot cake tiramisu cheesecake. Cheesecake biscuit jelly beans. Jelly-o icing chocolate macaroon.</p>
    </div>
  </div>
</div>

or you can set vertical-align:bottom on img because per default img has vertical-align:baseline

.flex-33 div {
  border: red solid 1px
}
img {
  vertical-align:bottom
}

<div class="flex-33">
  <div class="menu-container">
    <img class="menu-image" src="//lorempixel.com/100/100" alt="Sandwitch">
    <div class="menu-description">
      <h4>Sandwitch</h4>
      <p>Powder marshmallow marshmallow brownie carrot cake candy bonbon. Sweet sugar plum gummies caramels tart carrot cake tiramisu cheesecake. Cheesecake biscuit jelly beans. Jelly-o icing chocolate macaroon.</p>
    </div>
  </div>
</div>

Removing space between vertical div

2 个答案: