html - Removing space between vertical div -
<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 1 please me eliminate white space between 2 divs img
, .menu-description
please?
i reckon in last 3 hrs tried explained here, had partial luck, white-space disappeared, reappeared on changing browser width
.
because img
inline level element, set img
display:block
became block level therefore whitespace 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 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>
Comments
Post a Comment