Задать вопрос
@artem1kr

Хочу сместить заголовок в низ, а смещается блок, хотя margin указан на заголовок h1, почему?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Amazing</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">
    </head>
    <body>
        <div class="main-block">

                <h1 class="first-block-title">Lorem ipsum dolor sit amet</h1>
                <p class="first-block-text">
                    
                </p>
                <p class="first-block-2-text">
                    
                </p>


                <h2 class="second-block-title"></h2>

                <div class="second-block-background">

                </div>
                <p class="second-block-text">

                </p>
        </div>
    </body>
</html>


/*Обнуление*/
*{
    padding: 0;
    margin: 0;
    border: 0;
}
*,*:before,*:after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}

nav,footer,header,aside{display: block;}

html,body{
    height: 100%;
    width: 100%;
    font-size: 100%;
    line-height: 1;
    font-size: 14px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family:inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}

h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/

body{
    background-color: rgb(212, 212, 212);
    padding: 30px;
}

.main-block{
    background-color: rgb(255, 255, 255);
    max-width: 900px;
    min-height: 700px;
    box-shadow: 0 0 10px 0.1px #000;
    border-radius: 5px;
    margin: 0 auto;
}

.first-block-title{
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    text-align: center;
    margin: 20px 0 0 0;
}
  • Вопрос задан
  • 112 просмотров
Подписаться Простой 1 комментарий
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы