Отступы между блоков
Аня написала следующий код (пример 1) и получила страницу, показанную на рис. 1. Но Ане нужно, чтобы не было отступов между блоками, а также справа и слева от блоков. Какие изменения в код для этого требуется внести?
Рис. 1. Отступы вокруг блоков
Блоки h1 < background: #569099; padding: 10px; color: #fff; >p Вот такой чай
История о том, как один человек хотел попить чайку, но по ошибке вместо воды попытался налить в чайник бензин, и что из этого получилось.
Статьи по теме
- Селекторы тегов
- Схлопывающиеся отступы
Как убрать отступы и поля у всех элементов на странице?
Обнулить значения отступов и полей у всех элементов веб-страницы сразу.
Решение
Чтобы обнулить отступы и поля у всех элементов на странице, используйте стилевые свойства margin и padding с нулевыми значениями, добавляя их к универсальному селектору * , как показано в примере 1.
Пример 1. Убираем отступы у всех элементов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Убираем отступы * Пример заголовка
Основной текст
Результат данного примера показан на рис. 1.
Рис. 1. Нулевые отступы у всех элементов на странице
Обратите внимание, что отступов и полей нет не только у текста, но и у самой страницы.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как убрать отступ между блоками div
Рассмотрим практический пример
Итак, для наглядности и лучшего восприятия проблемы предлагаю все посмотреть и, так сказать, «пощупать» на практике. Берем любое изображение и одеваем его в div. Ниже вы видите пример кода: HTML
div> img src="img.png" width="250px" alt=""/> div>
При оформлении стилей зальем внутренний фон блока красным цветом. При нормальных условиях картинка полностью займет все место внутри блока и перекроет красный фон. Прописываем код для оформления CSS
div display:block; width:250px; margin:0px auto;/*Центруем блок*/ background:#ff0000;/*Зальем блок красным цветом, чтобы визуализировать отступ*/ > body background:#eee; >
В результате чего браузер нам покажет следующую картину Судя по красной полосе в нижней части контейнера можно констатировать, что непонятный отступ имеет место. Воспользовавшись панелью веб-мастера в браузере, стало известно, что отступ составил 5,511 пикселей. Очень забавляет тот факт, что во всех популярных браузерах этот баг присутствует, а вот всеми любимый Internet Explowerd в этом случае отрабатывает безупречно.
Причина появления отступа
Как человек с высшим техническим образованием смею Вас заверить, что ничего не происходит просто так, у всего есть причины. Разобравшись в этом вопросе я еще раз в этом убедился. Весь конфуз заключается в стандартных свойствах элементов. По умолчанию тег img имеет свойства строчного элемента, что в свою очередь означает, что элемент будет выравниваться по базовой линии текста. Эта линия располагается чуть выше нижнего края блока, так как для текста существует обязательный запас- место под «хвосты» букв.
Решение проблемы
Для исправления этого мелкого недочета достаточно присвоить изображению свойства блочного элемента. С этим нам поможет свойство display, прописываем картинке display: block; и избавляемся от ненужных проблем. Также можно подключить вертикальное выравнивание через свойство vertical-align. Это тоже поможет избавиться от нежелательного отступа.
В каких браузерах работает?
| 6.0+ | 5.0+ | 9.5+ | 4.0+ | 3.0+ | — | — |
Как убрать отступы между div?
Спасибо!
Но появляется проблема: если я хочу сделать margin у заголовков, то он делается не от границы родителя (div), а сдвигает родитель вниз.
Почему такое происходит и можно ли исправить?
Azim Kurt @Symphony Куратор тега CSS
Run Utochkin: сделайте padding у заголовков
Run Utochkin: Поставьте родителю overflow: hidden; или width: 100%; float: left;
Azim Kurt @Symphony Куратор тега CSS
Эдик: а если потребуется что-то вывести за рамки родительского блока?
Symphony: тогда вариант с overflow: hidden не прокатит, это косяк если не ошибаюсь именно firefox’а
Azim Kurt @Symphony Куратор тега CSS
Эдик: в вебките тоже не будет отображаться
Symphony: нет я имею ввиду косяк не с отображением за overflow: hidden а то что в фоксе смещение происходит у родительского элемента если у его дочек есть margin-top
Azim Kurt @Symphony Куратор тега CSS
Эдик: так же как и в вебките
Symphony: Может, но в хроме не замечал
Ответы на вопрос 2
Начинающий фронт-эндер
Взялись от заголовков.
Для того, чтобы искать откуда отступы, используйте панель разработчика в браузере. Тогда вы и увидите, что вам дает отступ.
В вашем случае случилось «схлопывание». Что это и как его побороть читайте здесь — htmlbook.ru/samlayout/blochnaya-verstka/skhlopyvay.