为什么图像和边界之间有空间？

Question

你可以告诉我为什么图像和边界之间有空格？ 这是我的代码 https://plnkr.co/edit/nBXb6vT2e39c5cZKUimM?p=preview

 <div class="first_news">
            <div class="top_new_header">
               <div class="info">
                   <p>Sports / IPL</p>
                   <p>TT of India | Apr 19, 2018 | 22:03:25 IST</p>
               </div>
                <div class="image_heading">
                    <div class="img_heading_div">
                        <img src="https://static.toiimg.com/photo/msid-63716346/63716346.jpg?pl=63716346"/>

                    </div>
                    <h1>Rajasthan Royals vs Delhi Daredevils, Match 6, Jaipur - RR beat DD by 10 runs (DLS)</h1>
                </div>
            </div>
        </div>

空间正确和底部

Answer 1

内联标签倾向于填充空间的高度和宽度。您需要将img定义为父div中的块级项目。 img标记不是块级元素。为了填补空白，请将此属性添加到您的css：

    .img_heading_div img {
    display: block;
}

Answer 2

因为你的css的这一部分有border: 3px solid #fff;：

.image_heading .img_heading_div{
        width: 40%;
        border: 3px solid #fff;
        margin: 0px 15px 0px -23px;
        display: inline-block;
    }

Answer 3

更改你的CSS

.img_heading_div img {
width: 130px;
height: 70px;
}

到这个

.img_heading_div img {
width: 100%;
height: 70px;
}

通过将宽度设置为100％，您告诉图像填充其父宽度，因此没有空间，并且我不确定为什么底部有空间