内联块div内的图像下方的空白区域

Question

在我使用的每个浏览器中，图像下面都有空格。 它有display: block;和vertical-align: top;属性，但仍有空格。图像在inline-block元素内部，可能是因为它吗？ 代码如下，感谢您的一切建议！

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 1

vertical-align应该在您使用inline-block

的元素中使用

试试这个，它会解决你的问题