hstur hstur - 8 months ago 39
CSS Question

White space below image inside inline-block div

There is whitespace below image in every browser I use.
It has

display: block;
and
vertical-align: top;
properties, but still, there is that whitespace. Image is inside of
inline-block
element, could it be because of it?
Code is below, thank you for every advice!
image whitespace

HTML:

<div class="zazitek-tab">
<div class="zazitek-img">
<img src="style/car-order.png">
</div>
<div class="zazitek-text">
<div class="zazitek-obsah">
<h2>Jízda ve Ferrari</h2>
<p class="description">Vozy se vzpínajícím se hřebcem patří mezi legendy mezi automobily...</p>
<span class="price">1 500 Kč</span>
<span class="info-but"><a href="#">Více informací</a></span>
</div>
</div>
</div>


CSS:

.zazitek-tab {width: 80%; display: block; margin: 0 auto; margin-top: 3%; padding: 0;
-webkit-box-shadow: 5px 6px 15px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 6px 15px -4px rgba(0,0,0,0.75);
box-shadow: 5px 6px 15px -4px rgba(0,0,0,0.75);
transition: 0.3s;}

.zazitek-tab:hover {
-webkit-box-shadow: -5px -4px 15px -4px rgba(0,0,0,0.75);
-moz-box-shadow: -5px -4px 15px -4px rgba(0,0,0,0.75);
box-shadow: -5px -4px 15px -4px rgba(0,0,0,0.75);
}

.zazitek-img {width: 30%; padding: 0 !important; margin: 0; display: inline-block; line-height: 0;}
.zazitek-img img {width: 100% !important; display: block !important; vertical-align: top; height: auto; margin: 0 !important; padding: 0;}
.zazitek-text {width: 65%; padding: 0 !important; margin: 0; display: inline-block; vertical-align: top;}

Answer Source

vertical-align should be used in the element where you've used inline-block

try this, it will fix your problem