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

您可以使用以下CSS删除空格：

div {
    font-size: 0;
}

div.subtitle {
    font-size: 1rem;
}

实时预览：JSFiddle

其他造型是必要的。

Answer 2

我认为这不是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>

Answer 3

请尝试以下代码

div::after {
    content: "";
    width: 60%;
}


.image-div {
    float: left;
    width: 100%;
}

div img {
    float: left;
    height: 30%;
    margin-right: 1%;
    width: 23%;
}

div.subtitle {
    background-color: #333333;
    color: white;
    float: left;
    margin-right: 1%;
    margin-top: 0;
    text-align: left;
    width: 23%;
}

.sub-div {
    float: left;
    width: 100%;
}
div.subcolor {
    background-color: #ba0927;
    float: left;
    height: 5px;
    margin-right: 1%;
    width: 23%;
}

<body>
    <img src="~/Content/slide1.png" id="slide" />

    <div class="image-div">
        <img src="http://dummyimage.com/200x200/000/fff"/>
        <img src="http://dummyimage.com/200x200/000/fff" />
        <img src="http://dummyimage.com/200x200/000/fff" />
        <img src="http://dummyimage.com/200x200/000/fff" />
    </div>
    <div class="sub-div">
        <div class="subtitle">
            Bosch Car Service
        </div>
        <div class="subtitle">
            Afspraak Proefrit
        </div>
        <div class="subtitle">
            Afspraak onderhoud
        </div>
        <div class="subtitle">
            Routebeschrijiving
        </div>
    </div>
    <div>
        <div class="subcolor" id="sub1"></div>
        <div class="subcolor" id="sub2"></div>
        <div class="subcolor" id="sub3"></div>
        <div class="subcolor" id="sub4"></div>
    </div>
    <div class="footer">
        <div class="images">
            <img src="~/Content/fb.jpg"/>
            <img src="~/Content/contact.jpg"/>
            <img src="~/Content/route.jpg"/>
        </div>
        <div class="information">
            <div class="contact">
                <h1>Houman BVBA</h1>
                <label>Boterstraat 6</label>
                <label>B-2811 Hombeek (Mechelen)</label>
                <label>Tel. 015 41 39 39</label>
                <label>Fax. 015/43 24 40</label>
            </div>
            <div class="schedule">
                <h1>Openingsuren</h1>
                <label>Maandag: 9u-12u|13u-18u</label>
                <label>Dinsdag: 9u-12u|13u-18u</label>
                <label>Woensdag: 9u-12u|13u-18u</label>
                <label>Donderdag: 9u-12u|13u-18u</label>
                <label>Vrijdag: 9u-12u|13u-18u</label>
                <label>Zaterdag: 9u-12u|13u-18u</label>
            </div>
        </div>
    </div>
</body>

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

3 个答案: