Проблемы при верстке?
Есть родительский блок и в нем находится другой, нужно чтобы дочерний блок отступал он родителя с помощью margin-top, но за ним вместе тянется родитель.
<div class="outer"> <div class="inner">INNER</div> </div> |
<div class="outer"> <div class="inner">INNER</div> </div>
* { padding: 0px; margin: 0px; } .outer { width: 100%; height: 100vh; background-color: red; } .inner { background-color: green; width: 60%; height: 60px; margin: 25px auto; } |
* { padding: 0px; margin: 0px; } .outer { width: 100%; height: 100vh; background-color: red; } .inner { background-color: green; width: 60%; height: 60px; margin: 25px auto; }
Результат вышеуказанного кода:
Почему так происходит и как это исправить?
Дополнительно:
Не стоит выкладывать ваш код в виде скриншотов, тем самым вы нарушаете правила ресурса. Оформите его через соответствующие теги или, в идеале, через песочницу, например, codepen.io.
2. И вообще это padding родителя.
Сократите количество тегов.
Придумайте вопросу такой заголовок, который будет: а) грамотным; б) отражать суть вашей проблемы.
Уберите мусорные реплики, не несущие информации о вашей проблеме - "здравствуйте", "подскажите пожалуйста", "такая проблема".
Замените скриншот кода текстом.
Ответы:
Для обнуления появившегося отступа можно использовать свойство overflow со значением auto.
<div class="outer"> <div class="inner">INNER</div> </div> |
<div class="outer"> <div class="inner">INNER</div> </div>
В стилях к классу родительского div добавлено свойство overflow: auto;
* { padding: 0px; margin: 0px; } .outer { width: 100%; height: 100vh; background-color: red; overflow: auto; } .inner { background-color: green; width: 60%; height: 60px; margin: 25px auto; } |
* { padding: 0px; margin: 0px; } .outer { width: 100%; height: 100vh; background-color: red; overflow: auto; } .inner { background-color: green; width: 60%; height: 60px; margin: 25px auto; }
В итоге получаем такой результат
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
При верстке веб-страниц возникают различные проблемы, которые могут затруднять процесс создания качественного и кроссбраузерного дизайна. Вот некоторые из наиболее распространенных проблем и способы их решения:
1. Неоднородное отображение на различных браузерах: одна из самых распространенных проблем при верстке. Для решения этой проблемы необходимо тщательно тестировать свой дизайн на различных браузерах (Chrome, Firefox, Safari, Edge, Opera), а также на различных устройствах (мобильные телефоны, планшеты, десктопы). Использование CSS-префиксов (-webkit-, -moz-, -ms-, -o-) может помочь исправить некоторые проблемы с отображением.
2. Некорректное позиционирование элементов: иногда элементы могут располагаться неправильно на странице из-за неправильного использования CSS-свойств (например, position, float, display). Для решения этой проблемы рекомендуется использовать инструменты разработчика браузера для анализа стилей и расположения элементов на странице.
3. Неправильное использование сетки: сетка помогает организовать контент на странице, но неправильное использование сетки может привести к несбалансированному дизайну. Для решения этой проблемы рекомендуется использовать сеточные системы (например, Bootstrap, Flexbox) для создания адаптивного и упорядоченного дизайна.
4. Неоптимизированные изображения: большие изображения могут замедлить загрузку страницы, что может негативно сказаться на пользовательском опыте. Для решения этой проблемы рекомендуется оптимизировать изображения перед их загрузкой на страницу (сжатие, выбор правильного формата файла).
5. Неиспользование семантических тегов: использование семантических тегов (например,