2017-04-13 23 views
-1

私が使用するすべてのブラウザに画像の下に空白があります。 display: block;vertical-align: top;のプロパティがありますが、それでも空白があります。画像はinline-block要素の内側にあります。 コードは以下のとおりです。アドバイスありがとうございます! image whitespaceインラインブロックdiv内の画像の下に空白があります

HTML:CSS

 <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> 

.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;} 
+0

[Imの可能な複製div内の年齢には画像の下に余分なスペースがあります](http://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) –

答えて

3

vertical-alignはあなたがinline-block

これを試してみてくださいを使用していた要素で使用する必要があり、それはあなたの問題を解決します

+0

素晴らしい、簡単な解決策:)ありがとう君は!! – hstur

+0

問題はありませんが、回答を受け入れることを忘れないでください – Lucian

関連する問題