Почему margin считает от html, а не от родителя?
Почему header__inner считает margin не от header, а от всего html?
HTML
<header class="header"> <div class="container header__inner"> <a class="logo" href="#"> <img class="logo__img" src="img/logo.png" alt=""> </a> <nav class="menu"> <ul class="menu__list"> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Про нас </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Каталог </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Команда </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Відгуки </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Курси </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Контакти </a> </li> </ul> </nav> <a class="phone" href="tel:+4565789876">+45 65 78 98 76</a> </div> </header> <footer class="footer"> <div class="container "> <a class="logo" href="#"> <img class="logo__img" src="img/logo.png" alt=""> </a> <nav class="menu"> <ul class="menu__list"> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Про нас </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Каталог </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Команда </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Відгуки </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Курси </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Контакти </a> </li> </ul> </nav> <div class="footer__contacts"> <a class="phone" href="tel:+4565789876">+45 65 78 98 76</a> <a class="email" href="mailto:candelsCandels@gmail.com">candelsCandels@gmail.com</a> <ul class="footer__social"> <li class="footer__social-item"> <a class="footer__social-link" href="#"> <img class="footer__social-img" src="img/facebook.svg" alt=""> </a> </li> <li class="footer__social-item"> <a class="footer__social-link" href="#"> <img class="footer__social-img" src="img/instagram.svg" alt=""> </a> </li> <li class="footer__social-item"> <a class="footer__social-link" href="#"> <img class="footer__social-img" src="img/linkedin.svg" alt=""> </a> </li> <li class="footer__social-item"> <a class="footer__social-link" href="#"> <img class="footer__social-img" src="img/youtube.svg" alt=""> </a> </li> </ul> </div> </div> </footer> |
<header class="header"> <div class="container header__inner"> <a class="logo" href="#"> <img class="logo__img" src="img/logo.png" alt=""> </a> <nav class="menu"> <ul class="menu__list"> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Про нас </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Каталог </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Команда </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Відгуки </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Курси </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Контакти </a> </li> </ul> </nav> <a class="phone" href="tel:+4565789876">+45 65 78 98 76</a> </div> </header> <footer class="footer"> <div class="container "> <a class="logo" href="#"> <img class="logo__img" src="img/logo.png" alt=""> </a> <nav class="menu"> <ul class="menu__list"> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Про нас </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Каталог </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Команда </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Відгуки </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Курси </a> </li> <li class="menu__list-item"> <a class="menu__list-link" href="#"> Контакти </a> </li> </ul> </nav> <div class="footer__contacts"> <a class="phone" href="tel:+4565789876">+45 65 78 98 76</a> <a class="email" href="mailto:candelsCandels@gmail.com">candelsCandels@gmail.com</a> <ul class="footer__social"> <li class="footer__social-item"> <a class="footer__social-link" href="#"> <img class="footer__social-img" src="img/facebook.svg" alt=""> </a> </li> <li class="footer__social-item"> <a class="footer__social-link" href="#"> <img class="footer__social-img" src="img/instagram.svg" alt=""> </a> </li> <li class="footer__social-item"> <a class="footer__social-link" href="#"> <img class="footer__social-img" src="img/linkedin.svg" alt=""> </a> </li> <li class="footer__social-item"> <a class="footer__social-link" href="#"> <img class="footer__social-img" src="img/youtube.svg" alt=""> </a> </li> </ul> </div> </div> </footer>
CSS
.container{ max-width: 1180px; padding: 0 10px; margin: 0 auto; } header{ background-color: #FFF8F3; } .header__inner{ margin-top: 45px; display: flex; justify-content: space-between; align-items: center; } |
.container{ max-width: 1180px; padding: 0 10px; margin: 0 auto; } header{ background-color: #FFF8F3; } .header__inner{ margin-top: 45px; display: flex; justify-content: space-between; align-items: center; }
Дополнительно:
Гуглить "схлопывание и выпадение вертикальных margin".
Потом "разница между padding и margin". Потому что это вообще не margin. Но схлопывание как раз таки должно научить отличать когда что использовать.
Почему так происходит, потому что свойство margin-top которое в header__inner добавляет верхний отступ (margin) между содержимым элемента и его родительским элементом.
Уберите все отступы внутри header__inner и добавьте внешний отступ снизу у header, это позволит создать пространство между header и следующим элементом.
.header { background-color: #FFF8F3; margin-bottom: 45px; /* Добавьте внешний отступ снизу */ } |
.header { background-color: #FFF8F3; margin-bottom: 45px; /* Добавьте внешний отступ снизу */ }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, когда margin считается от html, а не от родителя, может возникать из-за того, что у html по умолчанию заданы стандартные отступы. Давайте разберемся, почему это происходит и как можно исправить данную ситуацию.
HTML элементы имеют свои стандартные стили, которые браузер применяет автоматически. Например, у html элемента есть стандартные отступы в виде margin. Когда вы применяете margin к дочернему элементу, но не задаете значение для его родителя, то браузер будет использовать стандартные значения от html элемента.
Для того чтобы margin считался от родителя, вам нужно явно указать значение margin для родителя элемента. Например, вы можете задать значение margin: 0; для html элемента или для более конкретных родительских элементов, чтобы избежать использования стандартных отступов.
Пример:
html { margin: 0; padding: 0; } .parent { margin: 20px; } .child { margin: 10px; } <div class="parent"> <div class="child"> Content </div> </div>html { margin: 0; padding: 0; } .parent { margin: 20px; } .child { margin: 10px; } <div class="parent"> <div class="child"> Content </div> </div>
В данном примере мы явно указали значение margin для html элемента и для родителя с классом .parent. Теперь margin для дочернего элемента .child будет считаться от значения margin родителя, а не от стандартных значений html элемента.
Таким образом, чтобы избежать проблемы, когда margin считается от html, а не от родителя, необходимо явно указывать значения margin для всех родительских элементов, от которых будет зависеть расчет отступов дочерних элементов.