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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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