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

Убрать отступы между блоками div [дубликат]

Здравствуйте. Есть обыкновенные div блоки с фиксированной шириной и высотой. Не понятно откуда между ними есть небольшой отступ. Мне нужно либо сделать так чтобы после самого последнего блока не было пустого пространства. Либо вообще убрать эти отступы, но самое главное чтобы после последнего не было пустого места, чтобы было по самому краю.

* < margin: 0; padding: 0; >.catalog_index < margin: 0; padding: 0; background: #000; width: 1200px; >.catalog_index .tile

 
 
Двери межкомнатные
 
 
Двери входные
 
 
Двери для бани и сауны
 
 
Дверная фурнитура
 
 
Козырьки, погонаж, арки
 
 

2 ответа 2

У вас пробелы между inline-блоками. Как вариант — закомментировать их

* < margin: 0; padding: 0; >.catalog_index < margin: 0; padding: 0; background: #000; width: 1180px; >.catalog_index .tile

 
 
Двери межкомнатные
 
 
Двери входные
 
 
Двери для бани и сауны
 
 
Дверная фурнитура
 
 
Козырьки, погонаж, арки
 
 

У элементов с inline-block учитывается font-size . Это как расстояние между буквами, а точнее это символы пробелов между блоками из-за переноса. Если родителю задать font-size: 0; , то расстояние соответственно равно 0 и блоки прижимаются друг к другу, но в таком случае блокам или элементам внутри блоков надо незабыть задать font-size нужного размера чтобы видеть текст.

* < margin: 0; padding: 0; >.catalog_index < margin: 0; padding: 0; background: #000; width: 1200px; font-size: 0; >.catalog_index .tile

 
 
Двери межкомнатные
 
 
Двери входные
 
 
Двери для бани и сауны
 
 
Дверная фурнитура
 
 
Козырьки, погонаж, арки
 
 

Кроме того можно решить задачу при помощи float или flexbox , они заставят элементы прижаться друг к другу.

Источник

Борьба с пробелами между блочно-строчными элементами

Несколько раз встречал обсуждение проблемы пробелов в Твиттере, а затем увидел интересный дабблет на эту тему, поэтому решил зафиксировать.

Проблема вот в чём: между блочно-строчными элементами в браузере появляются пробелы, если вы форматируете HTML-код как обычно.

Другими словами

Такой пример кода даст следующий результат:

Это крайне нежелательное явление.

Нам часто нужно, чтобы элементы стояли друг к другу вплотную. Например, при вёрстке навигации это позволяет избавиться от неудобных маленьких некликабельных промежутков.

Это не «баг» (по крайней мере, я не думаю, что это баг). Просто так работает принцип расположения элементов в строчку. Ведь вы же хотите, чтобы между словами, которые вы печатаете через пробел, этот пробел был? Пробелы между этими блоками — почти то же самое, что пробелы между словами. При этом я допускаю, что спецификацию можно усовершенствовать и прописать, что пробелов между блочно-строчными элементами быть не должно, но я уверен, что мало кто решится открыть этот ящик Пандоры.

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

Убрать пробелы

Причина, по которой у вас получаются пробелы, в том, что у вас есть пробелы между элементами (на самом деле, перенос строки и знаки табуляции воспринимаются как пробел). Решить проблему поможет минимизированный HTML-код или любая из следующих хитростей:

Это всё довольно хитрые способы, но они делают своё дело.

Отрицательный внешний отступ

Можно подвинуть элементы, чтобы они стояли, как нужно, используя внешний отступ c отрицательным значением −4px . (возможны вариации значения в зависимости от размера шрифта у родительских элементов). Этот способ может некорректно работать в старых версиях IE (6 и 7), но если вам плевать на отображение в этих браузерах, вы хотя бы сможете сохранить в чистоте форматирование кода.

Не использовать закрывающий тег

Для HTML5 так делать — в порядке вещей. Хотя, стоит признать, становится немного не по себе.

Установить размер шрифта пробела, равный нулю

Пробел, имеющий нулевой размер шрифта, равен. нулю.

Мэтт Стоу сообщает, что метод использования

Другая странность! Даг Стюарт показал мне, что если использовать

Пусть они лучше плавают!

Может быть, им вообще необязательно быть блочно-строчными элементами, может, можно задать их расположение при помощи свойства float ? Это позволит вам задать им и ширину, и высоту, и внутренние отступы, и всё остальное. Но при этом вы не сможете выровнять их так же, как блочно-строчные элементы, используя свойство text-align: center; у родителя. Ну, вообще. вы в каком-то смысле сможете это сделать, но выглядит это очень странно.

Используйте вместо этого flexbox

Если вас устраивает список поддерживаемых браузеров, а также все, что вам нужно от блочно-строчных элементов — это их выравнивание по центру, вы вполне можете воспользоваться flexbox. Это не совсем замена блочно-строчным элементам, но вы сможете добиться от него того, чего хотите.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Remove margin between divs [duplicate]

Fiddle here 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?

Yes, feel free to close/vote close (or should I delete myself? I feel there are some worthwhile answers here which would be a shame if they got lost)

Honestly, this question is asked at least once a day. There are no answers here that aren’t already attached to other duplicates of this problem.

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.

1. Fix the margin space by adding margin-left: -4px; — http://jsfiddle.net/uhBW2/10/
2. Fix the space by shrinking the space using font-size: 0px; — http://jsfiddle.net/uhBW2/11/
3. Fix the space by deleting the line breaks between your div’s (NOT RECOMMENDED — HARD TO READ) — http://jsfiddle.net/uhBW2/12/
4. 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.

Источник