イメージ/コンテナの下の空白は、クラスまたはイメージのディメンションのためですか？

Question

私はウェブサイトを開発していて、問題に遭遇しましたHere

サービスイメージにはすべて、コンテナの底面との間に小さな空白があります。私はSOを検索して同様の問題を抱えています（しかし、ブートストラップや応答可能なフレームワークを使用していることは明らかではありません）。また、問題の原因を突き止めるためにファイヤーバグを使用しています投稿）...

問題がクラスかどうかはわかりませんが（Firebugはいいえ）、「.img-responsive」クラスと画像のサイズの組み合わせに過ぎません。

誰かが見て、これにいくつかの洞察を貸すことができれば、非常に有益で非常に高く評価されます。ありがとう！

問題が発見されたHTMLは以下の通りです：

.service-img-bg { 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 service-img-bg pull-right"> 
 
    <figure class="imghvr-slide-left"> 
 
    <img class="img-responsive service-main-img hidden-md" src="media/services-icons/offered-service-img.png" alt="Hologlass"> 
 
    <img class="img-responsive service-main-img visible-md" src="media/services-icons/offered-service-img-sm.png" alt="Hologlass"> 
 
    <figcaption> 
 
     <a class="video-image playVideo" href="https://www.youtube.com/embed/Q4QI3VyC5p4?rel=0&amp;showinfo=0" data-toggle="lightbox" data-title="3D Mapping Demonstration"> 
 
     <i class="fa fa-search overlay-icon"></i> 
 
     </a> 
 
    </figcaption> 
 
    </figure> 
 
</div> 
 
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow slideInLeft pull-left service-text-bg-img"> 
 
    <div class="col-md-12 service-text-container"> 
 
    <h5 style="padding:0 0 15px;">HOLOGRAPHIC</h5> 
 
    <p>Our method of applying specialized light absorbing film-- and in some high-ambient lighting situations, low voltage autodimming electrochromic film-- to a transparent substrate of glass, acrylic or polycarbonate transforms these common surfaces into 
 
     a display that truly commands stopping power. We’ve developed a solution that is a head turning alternative to traditional digital signage that is suitable for storefronts, wayfinding and interactive multi-touch or touchless concepts. 
 
     <br> 
 
     <br>Our lineup offers a full range of rear, front &amp; dual projection applications. Both rigid and film based surfaces custom built to spec, with additional iturnkey installation services your project which include specialty mounting, adhesions and 
 
     even massive ‘Holoboard’ structures up to 40 feet wide.</p> 
 
    <div class="page-scroll"> 
 
     <a href="#footerBlock" class="inquire-link"> 
 
     <button class="inquire-btn">INQUIRE NOW</button> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

[class^="imghvr-"], [class*=" imghvr-"]このclassのプロパティdisplay: blockを行い、代わりにdisplay: inline-block

のそれはhttp://prntscr.com/d57tkc

を解決し、ここを参照してください。

Answer 2

我々 @ Fimadは100％正確ではなく、img display:blockを設定する必要はありません。imgブロック要素を作成するだけで、デフォルトのdisplay:inlineまたはdisplay:inline-blockが表示されなくなります。あなたが言及したようdisplay:blockを設定することができ、またdisplay:tableまたはdisplay:flex仕事、あるいはたとえばfloat:leftのためになることを行うには

。