Remove margin between divs [duplicate]
when fiddling enough with negative margins, it seems to start working at some point, but it feels terribly hackish. How do I get the elements to align to each other?
4 Answers 4
Background:
Inline-block inserts a natural space between items. In fact, it’s essentially the width of a space if you were to hit the spacebar in your content, or even typing (an html markup space). This space will be smaller or larger dependent on your font size.
There are several fixes to this problem, and I personally as well as many others consider this problem to be a sort of «bug» that needs fixing. That said, all of the fixes for this are very «hackish» so to speak. The solution you choose is up to your personal preference.
Suggested Solution per your particular situation and code:
Simply switch over to using floats instead. Instead of setting display: inline-block; do this:
Other solutions:
(Note that in the JDFiddle solution using margin-left that the first div also moved left when it should not have done so. To counteract this problem you will need to implement a class on that first div and make that -4 value 0 for that div alone. Another solution, and my preferred solution, would be to use the :first-child structural pseudo-class to select that first div. It is more dynamic, and doesn’t require HTML to be modified.
- Fix the margin space by adding margin-left: -4px; — http://jsfiddle.net/uhBW2/10/
- Fix the space by shrinking the space using font-size: 0px; — http://jsfiddle.net/uhBW2/11/
- Fix the space by deleting the line breaks between your div’s (NOT RECOMMENDED — HARD TO READ) — http://jsfiddle.net/uhBW2/12/
- Fix the space by using word-space: -.25em; (See PavloMykhalov’s comments below) — http://jsfiddle.net/uhBW2/13/
***Note to other developers: If there are other solutions to this please post below and I will add it above. I feel like I’m missing a 5th way of fixing this.
Как убрать отступ между блоками div
Вы пытаетесь создать встроенную сетку с собственными правилами стилистики CSS, используя режим отображения встроенного блока. Где вы не понимаете и спрашиваете себя «Почему, черт возьми, есть пространство между моими элементами». Несмотря на то, что ваш CSS может быть очень простым, у вас всегда будет пространство между вашими HTML элементами.
Обычно вы увидите пустое пространство по умолчанию между элементами, когда вы устанавливаете их отображаемое значение для встроенного или встроенного блока. Если вам не нужны пробелы в вашем дизайне, вы можете удалить их несколькими способами.
Другие способы удаления стандартного пробела
1. Установить font-size: 0; на родительский элемент. Пространство — это пространство символов, поэтому установка размера шрифта в ноль также делает размер пространства равным ноль. Но вам нужно установить размер шрифта дочерних элементов inline-block обратно в нужный размер.
2. Добавление комментария HTML между элементами встроенного блока также удалит пространств
1. Браузер интерпретирует разрывы строк и пробелы в HTML как содержимое.
2. Браузер добавляет пробелы между отображаемыми элементами inline и inline-block точно так же, как добавляет пробелы между словами.
3. Вы можете удалить пробелы, применив небольшое, отрицательное правое поле к элементам.
4. Значение элемента font-size влияет на размер зазоров между встроенными и встроенными блоками. Чем больше размер шрифта, тем больше вам потребуется компенсировать поля, поэтому вам нужно поэкспериментировать с отрицательными значениями маржи.
Но все это быстро решается, что для этого изначально выставляем нулевой шрифт под списки для нужного размера заданного элемента.
Свойство CSS display со значением inline-block является очень полезным для контроля размеров, а также margin и padding из встроенных элементов.
Тем не менее при использовании inline-block визуального форматирования пробелы в HTML коде создают на экране какое-то визуальное пространство. Но вы можете избавиться от него, используя следующие простые методы.
Как исправить проблемы CSS разметки?
Изучая веб-разработку, вы будете часто бороться с CSS. В нем есть много вещей, о которых не знаешь, пока не столкнешься с ними нос к носу.
Особенно много проблем доставляет разметка макета. Например, вы пытаетесь что-то спозиционировать, но внезапно исчезают отступы, элемент уменьшается или пропадает или просто позиционируется не там, где нужно.
В интернете очень много запросов подобных следующим:
- как удалить вертикальный отступ между дивами
- как убрать горизонтальный отступ между дивами
- как исправить схлопывание маргинов css
- почему маргины внутренних элементов не работают
- почему нижний/левый/правый маргин не работает
Да, схлопывание маргинов – это довольно сложная концепция, которая не сразу поддается пониманию. Узнать об этом подробнее можно здесь.
Есть и другие популярные вопросы, которые мы разберем прямо сейчас.
text-align: center не работает
Мы постоянно используем text-align: center для центрирования текста. Но это правило также может быть использовано для выравнивания элементов внутри родительского контейнера.
У новичков это часто не получается: текст внутри блока центрируется, а сам блок – нет. Почему? Потому что элемент, который вы пытаетесь выровнять является блочным.
По умолчанию он занимает 100% ширины родителя, поэтому его невозможно выровнять по центру. Чтобы решить проблему, ему следует установить строчно-блочный тип отображения.
Рассмотрим на примере.
Есть вот такая разметка:
и вот такие стили:
В браузере это выглядит следующим образом:
Текст выровнялся по центру, но сам элемент – нет. Теперь вы знаете, что это происходит из-за того, что он имеет блочный тип отображения. Чтобы сработало свойство text-align: center , он должен быть строчным или строчно-блочным.
Добавим всего одну строчку в файл стилей:
Теперь все правильно:
И это совсем не магия, ведь вы знаете, как все работает ��
Расстояние между инлайн-блочными элементами
С этой проблемой сталкивался каждый CSS-новичок.
Самая раздражающая ситуация, когда у вас есть родительский контейнер и внутри него два элемента, между которыми вы хотите поровну поделить пространство.
Предполагается, что каждому нужно назначить ширину в 50%, однако это не работает. Непонятное расстояние между ними заставляет второй элемент сползать на следующую строчку, так как итоговая сумма размеров превышает 100% родителя.
В этом моменте начинаются истерики и появляются костыли с волшебными цифрами вроде width: 49.76% .
Разберемся на примере: есть два элемента с одинаковой шириной и высотой, и требуется, чтобы они занимали 50/50 доступного пространства внутри своего родителя.
и получаем вот это:
Есть 2 распространенных способа решения этой проблемы.
- использовать комментарии;
- удалить пространство между тегами в HTML-файле.
Теперь все нормально:
Примечание переводчика:
Строчно-блочные элементы воспринимаются браузером как обычные слова в предложении, поэтому он разделяет их пробелом, ширина которого примерно равна 4px. Оба способа позволяют убрать этот пробел на физическом уровне.
Также можно воспользоваться CSS и установить для контейнера нулевой размер шрифта. При этом пробел сохранится, но будет иметь нулевую длину. Этот способ часто используется, но подходит не для всех ситуаций.
«Съезжание» строчно-блочных элементов
Эта проблема появляется, когда у вас есть два строчно-блочных элемента и вы добавляете в один из них больше контента.
Для примера возьмем вот такую разметку:
и вот такие стили:
Макет сломался из-за того, что вершина первого элемента сползла к низу второго – это проблема выравнивания. Решить ее очень легко, есть целых два пути:
- overflow: hidden;
- vertical-align: middle (или top, или bottom, если вы понимаете, как это работает).
overflow: hidden
Это свойство можно добавить всем строчно-блочным элементам в ряду или только тому, который вызвал проблему:
vertical-align: middle
В этом решении вместо overflow используется vertical-align . Тип выравнивания может быть любым: top, middle, bottom.
Если использовать top для элементов с разной высотой, то результат будет следующий:
С другими значениями, вы можете поэкспериментировать самостоятельно.
Если вы не понимаете, как работает вертикальное выравнивание, просто используйте вместо него overflow: hidden .
А мы попробуем выровнять блоки в примере:
Плавающие элементы не имеют высоты?
Это одна из самых раздражающих проблем CSS.
Допустим, у вас есть 2 заголовка, вы устанавливаете одному float: left , и внезапно второй прилипает к верху сайта перед ним, как будто в разметке он идет первым.
Или например, вы устанавливаете float обоим заголовкам, одному – влево, а другому &ndahs; вправо. Тогда элемент, идущий после них, поднимется вверху.
Существует 3 возможных решения для этой проблемы:
- overflow: hidden ;
- display: inline-block .
oveflow: hidden
Нужно обернуть плавающие элементы в родительский контейнер и уже для него установить overflow: hidden .
display: inline-block
Решение похоже на предыдущее, только вместо overflow: hidden родительскому элементу добавляется display: inline-block .
Однако это не поставит плавающий и неплавающий элементы рядом, ведь блочный элемент по-прежнему будет пытаться занять всю ширину.
Чтобы все работало, вам нужно вычислить и установить новую ширину для родителя. Это похоже на фокус: нужно найти текущую ширину родителя и прибавить к ней текущую ширину плавающего элемента. Теперь второй заголовок окажется рядом с первым.
На самом деле тут все можно объяснить. Раньше контент второго заголовка просто не мог поместиться рядом с первым, потому что инлайн-блочный родитель имел ширину, равную максимальному непереносимому контенту. Когда мы искусственно установили ему ширину, позволяющую вместить оба элемента, неплавающий блок смог растянуться на всю ширину, а его контент уместился даже сдвинувшись относительно плавающего элемента.
Сложно, непонятно и сбивает с толку? Да, есть немного. На самом деле, вам не следует использовать это решение, так как оно совершенно немасштабируемо. Если размеры блоков могут меняться (например, при увеличении шрифта), оно не подходит.
Поэтому пойдем более простым путем и сделаем второй заголовок строчно-блочным либо также плавающим.
Не забудьте использовать вертикальное выравнивание.
Стили с вертикальным выравниванием:
А этот пример без выравнивания:
Margin-top не работает?
Еще одна из самых распространенных проблем, которую часто решают с помощью паддингов, вместо того, чтобы разобраться, в чем дело.
Эта проблема известна как схлопывание полей.
Представим, что один элемент расположен внутри другого. Если назначить margin-top внутреннему блоку, то он появится у внешнего, а отступ потомка от родителя не изменится.
Есть целых 6 решений этой проблемы (но не все из них хороши).
- display: inline-block для дочернего элемента;
- display: inline-block для родительского элемента;
- overflow: hidden для родительского элемента;
- position: absolute для родительского элемента;
- установка прозрачной рамки для родителя;
- установка верхнего паддинга для родителя (можно использовать очень маленькие значения, десятые доли пикселя).
Первый и второй способ решают проблему за счет того, что один из элементов перестает быть блочным. Проблема схлопывания актуальна только для этого типа отображения.
Пятый и шестой варианты действуют за счет оформления верхней границы родительского элемента. Если на пути маргина встает рамка или паддинг, схлопывание не происходит.
Третье и четвертое решение неочевидны и имеют свои подводные камни, поэтому по возможности лучше их не использовать. Отмена стандартного схлопывания в этих случаях является побочным эффектом.
После применения любого из этих способов результат будет такой:
Вот с такими проблемами часто сталкиваются начинающие веб-разработчики. Надеюсь, статья была полезной.
Почему у меня отступы между блоками div?
- Регистрация: 20.01.2013
- Сообщений: 720
- Репутация: 189
- Webmoney BL:
?
- Регистрация: 26.11.2013
- Сообщений: 14
- Репутация: 1
- Регистрация: 19.01.2016
- Сообщений: 14
- Репутация: 3
Спасибо сказали:
- Регистрация: 26.11.2013
- Сообщений: 14
- Репутация: 1
- Регистрация: 19.01.2016
- Сообщений: 14
- Репутация: 3
- Регистрация: 29.11.2009
- Сообщений: 256
- Репутация: 98
- Webmoney BL:
?