html - 图像和 div 之间不需要的间距

Question

我有一些 CSS 问题。我试图删除图像和标签之间的空间，但它不起作用。 这就是我所拥有的:

这就是我想要的:

我在删除图片下方的空间时遇到问题，标签和标签下方的其他 div 也遇到同样的问题。同时我不知道如何从页脚内联页眉。

这是我对 html 和 css 的摆弄: https://jsfiddle.net/cwd6qw3o/

 div img {
        display: inline-block;
        height: 30%;
        width: 23%;
    }

    div.subtitle {
        background-color: #333333;
        color: white;
        display: inline-block;
        margin-top: 0;
        text-align: left;
        width: 23%;
    }

    div.subcolor {
        background-color: #ba0927;
        display: inline-block;
        height: 5px;
        width: 23%;
    }

    div.footer {
        display: inline-block;
        background-color: #e6e6e6;
        width: 100%;
        height: 5%;
    }

请告诉我我做错了什么:)。 谢谢!

Answer 1

我认为这在您的 HTML 中不是一个好的结构，为什么不将您的元素包装在相同的 li 中，例如

<ul>
    <li>
        <img src="~/Content/cont1.png"/>
        <p>Bosch Car Service</p>
    </li>
    <li>
        <img src="~/Content/cont2.png"/>
        <p>Afspraak Proefrit</p>
    </li>
    <li>
        <img src="~/Content/cont3.png"/>
        <p>Afspraak onderhoud</p>
    </li>
    <li>
        <img src="~/Content/cont4.png"/>
        <p>Routebeschrijiving</p>
    </li>
</ul>