Убираем отступы

Как убрать отступы между блоками css

Для того чтобы управлять внешними отступами, т.е. отступами между элементами на странице — необходимо использоваться свойство margin.

Свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top, margin-right, margin-bottom и margin-left.

box-model

Таким образом чтобы убрать отступы между элементами правильно задать margin в 0. Рассмотрим пример.

 class="box">Блок №1  class="box">Блок №2  class="box">Блок №3 

Применив стили ниже, блоки образуют одну колонку без отступов.

.red  background-color: red; > .blue  background-color: blue; > .green  background-color: green; > .box  height: 100px; width: 125px; margin: 0px; > 

Источник

Как убрать отступы между div?

standy

Спасибо!
Но появляется проблема: если я хочу сделать margin у заголовков, то он делается не от границы родителя (div), а сдвигает родитель вниз.
Почему такое происходит и можно ли исправить?

Symphony

Symphony

Symphony

Symphony: нет я имею ввиду косяк не с отображением за overflow: hidden а то что в фоксе смещение происходит у родительского элемента если у его дочек есть margin-top

Symphony

paradokso

Взялись от заголовков.
Для того, чтобы искать откуда отступы, используйте панель разработчика в браузере. Тогда вы и увидите, что вам дает отступ.

В вашем случае случилось «схлопывание». Что это и как его побороть читайте здесь — htmlbook.ru/samlayout/blochnaya-verstka/skhlopyvay.

Источник

Как убрать отступы и поля у всех элементов на странице?

Обнулить значения отступов и полей у всех элементов веб-страницы сразу.

Решение

Чтобы обнулить отступы и поля у всех элементов на странице, используйте стилевые свойства margin и padding с нулевыми значениями, добавляя их к универсальному селектору * , как показано в примере 1.

Пример 1. Убираем отступы у всех элементов

HTML5 CSS 2.1 IE Cr Op Sa Fx

     * 

Пример заголовка

Основной текст

Результат данного примера показан на рис. 1.

Нулевые отступы у всех элементов на странице

Рис. 1. Нулевые отступы у всех элементов на странице

Обратите внимание, что отступов и полей нет не только у текста, но и у самой страницы.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Источник

Читайте также:  How to save html files
Оцените статью