Question

由于某些未知原因，当我将margin-left添加到.basic-info h1时，它也适用于.bottomContent中的h1。因此，bottomContent中的h1也给出了80px的余量。我的意思是.bottomContent h1 {padding-left：80px}，这在理论上应该是唯一应用的，但它不是，所以padding-left在底层内部的h1上是双倍的。

作为一个简单的解决方案，我可以删除bottomContent h1，并使用.basic-info保留CSS，但显然我做错了。

HTML

div class = "basic-info">
    <div class ="image"> <img src = "logo.jpg" alt = "this is an image"> </div>
    <div class = "inside-info">
        <h1> Know better. Book better. Go better. </h1>

        <p>See the latest reviews and compare the lowest hotel prices from 200+ hotel booking sites to help you make the most of your trip
        See the latest reviews and compare the lowest hotel prices from 200+ hotel booking sites to help you make the most of your trip
        See the latest reviews and compare the lowest hotel prices from 200+ hotel booking sites to help you make the most of your trip
        See the latest reviews and compare the lowest hotel prices from 200+ hotel booking sites to help you make the most of your trip
        See the latest reviews and compare the lowest hotel prices from 200+ hotel booking sites to help you make the most of your trip</p>
    </div>
    </div>

    <div class = "bottomContent">
        <h1> Top hotels: Recommendations </h1>
        <div class ="number-one">
            <img src = "smallimages.jpg" alt = "this is an image ">
            <img src = "smallimages.jpg" alt = "this is an image ">
            <img src = "smallimages.jpg" alt = "this is an image ">

        </div>

    </div>

CSS

.basic-info p,h1{
    margin-left:80px;
    width:50%;
}

.bottomContent h1{
        margin-left:80px;

    }

Answer 1

margin-left: 80px已应用于.basic-info p和h1，因为您有逗号。你需要做这样的事情才能发挥作用......

.basic-info p, .basic-info h1 {
    margin-left:80px;
    width:50%;
}

Answer 2

我想你想给.inside-info h1留下余量而不是.bottomContent h1 所以你可以给css像.. .basic-info .inside-info h1{ margin-left:80px; }

这不适用于bottomContent中的h1。

CSS margin-left应用于不正确的类标题

2 个答案: