Question

添加h标签后，html代码中出现了块的上部缩进。如何删除第二块和第三块的上部填充？为什么会这样？没有h块通常会显示

html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="main.css" rel="stylesheet">
        <title>1</title>
    </head>
    <body>
        <div id="container">
            <div class="block block1">
                <h3>Mark Manson</h3>
                <h1>The<br> dark side of the digital nomad</h1>
            </div>
            <div class="block block2">
                text
            </div>
            <div class="block block3">
                comments
            </div>
        </div>
    </body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdanta;
    font-size: 14px;
    color: #333;
    background: #DCDCDC;
}

#container {
    font-size: 0;
}

.block {
    display: inline-block;
    width: 250px;
    height: 440px;
    background-color: white;
    background-size: cover;
    margin-right: 50px;
    box-sizing: border-box;
    font-size: 14px;
}

.block1 {
    background-image: url("https://images.unsplash.com/photo-1453396450673-3fe83d2db2c4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=5eb7a0fcc589f787ef254317fcbf88c0");
    background-repeat: no-repeat;
    background-size: 250px 405px;
    color: white;
    padding-top: 150px;
}

Answer 1

它不是padding问题，它与vertical-align有关，您可以将其设置为顶部以解决此问题。检查下面的代码段

＆＃13;

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Verdanta;
    font-size: 14px;
    color: #333;
    background: #DCDCDC;
}

#container {
    font-size: 0;
}

.block {
    display: inline-block;
    width: 250px;
    height: 440px;
    background-color: white;
    background-size: cover;
    margin-right: 50px;
    box-sizing: border-box;
    font-size: 14px;
    vertical-align: top;
}

.block1 {
    background-image: url("https://images.unsplash.com/photo-1453396450673-3fe83d2db2c4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=5eb7a0fcc589f787ef254317fcbf88c0");
    background-repeat: no-repeat;
    background-size: 250px 405px;
    color: white;
    padding-top: 150px;
}

＆＃13;

<div id="container">
    <div class="block block1">
        <h3>Mark Manson</h3>
        <h1>The<br> dark side of the digital nomad</h1>
    </div>
    <div class="block block2">
        text
    </div>
    <div class="block block3">
        comments
    </div>
</div>

＆＃13;

如何删除第二块和第三块的上部填充？

1 个答案: