1

У меня есть страница с меню, задний фон - фотография. Я хочу сделать отступления меню сверху страницы, но когда задаю margin-top у меня не делается отступление меню сверху, а оно берет весь header и делает отступление с начала страницы. В чем моя ошибка ???

HTML

<header class="header">
<div lassc="menu">
<div><a href="#">PRICING</a></div>
<div><a href="#">SUPPORT</a></div>
<div><a href="#">ABOUT</a></div>
<div><a href="#">LOGIN</a></div>
<div><a href="#">SIGN IN</a></div>
</div>
</header>

CSS

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');

*{
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
}

.header {
height: 939px;
background-image: url(./images/image.png);
}

.menu{
display: flex;
column-gap: 27px;
font-weight: bold;
width: 414px;
height: 31px;
margin-top: 35px;
}

3 ответа 3

2

Браузер все делает правильно так как margin это внешний отступ. Поэтому внешний отступ и есть снаружи. Вам надо меню присвоить padding-top внутренний отступ сверху.

1
  • Йой, я даже и не подумал. Спасибо) 13 мая 2021 в 14:04
1

Тут море различных решений на самом деле.

Пара вариантов:

  1. Добавить в .header overflow:hidden
  2. Заменить margin-top на padding-top
0

Можно сделать так, для элемента header задать padding сверху и снизу.

Ваш ответ

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

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