0

Между блоками HTML появились какие-то непонятные пробелы, которые я не могу убрать

HTML:

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>
    <div class="t1">
        <div class="block_1">
            <br>
            <span class="name_1">
                <h1>Text 1</h1>
            </span>
            <span class="desc_1">
                <h2>Desc 1</h2>
            </span>
            <br>
        </div>

        <div class="block_2">
            <span class="name_2">
                <h1>Test</h1>
            </span>
        </div>
    </div>
</body>
</html>

CSS:

body {
    background-color: #515905;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


.block_1 {  
    background-color: rgb(40, 40, 40, 0.8);
    position: relative;
    width: auto;
    height: auto;
    margin: auto;
    margin-top: 5%;
    margin-left: 20%;
    margin-right: 20%;
}

.name_1 {
    font-family: Roboto;
    font-size: 100%;
    color: #fff;
    text-align: center;
}

.desc_1{
    font-family: Roboto;
    font-size: 120%;
    color: #fff;
    text-align: center;
}

.block_2 {  
    background: rgb(196, 196, 196, 0.8);
    position: relative;
    width: auto;
    height: auto;
    margin: auto;
    margin-left: 20%;
    margin-right: 20%;
}


.name_2 {
    font-family: Roboto;
    font-size: 100%;
    color: #000;
    text-align: center;
}

И вот сам пример этих "пробелов". Как сделать так, чтобы этого отступа не было и блоки стояли впритык? введите сюда описание изображения

1 ответ 1

0

Отступ дает элемент h1, можете его обнулить для элемента с классом .block_2.


Добавлю еще вот что.. Блочные элементы не могут находится в строковом. То есть.. h1, h2, ... h6 - не могут находится в span.

body {
    background-color: #515905;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


.block_1 {  
    background-color: rgb(40, 40, 40, 0.8);
    position: relative;
    width: auto;
    height: auto;
    margin: auto;
    margin-top: 5%;
    margin-left: 20%;
    margin-right: 20%;
}

.name_1 {
    font-family: Roboto;
    font-size: 100%;
    color: #fff;
    text-align: center;
}

.desc_1{
    font-family: Roboto;
    font-size: 120%;
    color: #fff;
    text-align: center;
}

.block_2 {  
    background: rgb(196, 196, 196, 0.8);
    position: relative;
    width: auto;
    height: auto;
    margin: auto;
    margin-left: 20%;
    margin-right: 20%;
}


.name_2 {
    font-family: Roboto;
    font-size: 100%;
    color: #000;
    text-align: center;
}

.block_2 h1
{
  margin: 0;
}
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>
    <div class="t1">
        <div class="block_1">
            <br>
            <span class="name_1">
                <h1>Text 1</h1>
            </span>
            <span class="desc_1">
                <h2>Desc 1</h2>
            </span>
            <br>
        </div>

        <div class="block_2">
            <span class="name_2">
                <h1>Test</h1>
            </span>
        </div>
    </div>
</body>
</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.