Как убрать пустое пространство в css
Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».
Бесплатные уроки CSS для начинающих
Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.
Как убрать пустое место между блоками inline-block?
Между двумя блоками div есть пространство буквально в 1px , и снизу блока то же самое.
Все margin’ы я обнулил, откуда они взялись и как их убрать, чтобы блоки вплотную стояли?
Знаю, что можно сделать с помощью float, но хотелось бы оставить display: inline-block .
Между элементами появляется пространство, вызванное тем, при написание вы использовали "новую строку", а браузер из этого уже сделал "пробел":
Решений несколько, вот те которые могу предложить:
Выставить родителю font-size: 0
Использовать float: left;
Использовать комментарий
Использовать "новые" технологии Flexbox или Grid Layout
Такое может происходить из за пустого места в шаблоне HTML, которое обычно убирается на этапе минификации.
Если она не планируется, то понадобиться самостоятельно убрать пробелы:
В случае, когда мы имеем дело с определенными inline-элементами может потребоваться дополнительное обнуление свойств font-size и line-height , которые могут провоцировать нежелательные отступы.
Отдельно стоит отметить что у div-элементов margin и padding по дефолту и так равны нулю, т.е специально обнулять их не требуеться.
Позиционирование блока через position:relative оставляет пустое пространство. Как убрать?
Половину дня потратил на решение проблемы с пустым пространством, возникающим вследствие позиционирования блока с помощью position:relative. В моем случае я перекрывал часть одного фона другим (такая вот дизайнерская задумка). Проблема заключалась в том, что после перемещения блока вверх, под ним появлялось пустое пространство, равное по высоте значению top.
По некоторым ссылкам из поисковика натыкался на решение, согласно которому необходимо было присвоить данному блоку свойство margin с отрицательным значением, равным значению top. Условный пример:
Как избавиться от пустого пространства после использования position: relative?
Какая задача: Сделать блок из 6 картинок, на каждой картинке сделать полупрозрачные стикеры, под картинкой сделать тайтл.
Какая проблема: Я оформляю стикер обычной надписью и поднимаю его в картинку через position: relative. В итоге появляется пустое место, от которого я не могу избавиться.
Можно с этим как-то справиться или есть какой-то другой способ создания таких стикеров?
Как удалить лишнее пустое пространство под изображением с помощью CSS
Если вы попытаетесь поместить изображение в элемент <div> , имеющий границы, вы увидите лишнее белое пространство (около 3px ) внизу изображения. Это происходит потому, что изображение является строчным элементом, поэтому браузер добавляет некоторые пробелы под базовой линией.
Самый простой способ избавиться от этой проблемы — изменить отображаемое значение изображения по умолчанию со строчного на блочное, т.е. применить стиль display: block; для изображения, как показано ниже:
Remove white space below image [duplicate]
In Firefox only my video thumbnails are displaying mysterious 2-3 pixels of white space between the bottom of my image and its border (see below).
I’ve tried everything I can think of in Firebug with no luck.
How can I remove this white space?
9 Answers 9
You’re seeing the space for descenders (the bits that hang off the bottom of ‘y’ and ‘p’) because img is an inline element by default. This removes the gap:
You can use code below if you don’t want to modify block mode:
Or you can use following as Stuart suggests:
If you would like to preserve the image as inline you can put vertical-align: top or vertical-align: bottom on it. By default it is aligned on the baseline hence the few pixels beneath it.
I’ve set up a JSFiddle to test several different solutions to this problem. Based on the [vague] criteria of
1) Maximum flexibility
2) No weird behavior
The accepted answer here of
which is recommended by a lot of people (such as in this excellent article), actually ranks fourth.
1st, 2nd, and 3rd place are all a toss-up between these three solutions:
1) The solution given by @Dave Kok and @Hasan Gursoy:
- All display values work on both the parent and img.
- No very strange behavior; any siblings of the img fall where you’d expect them to.
- Very efficient.
- In the [perfectly valid] case of both the parent and img having `display: inline`, the value of this property can determine the position of the img’s parent (a bit strange).
2) Setting font-size: 0; on the parent element:
Since this one [kind of] requires vertical-align: top on the img , this is basically an extension of the 1st solution.
- All display values work on both the parent and img.
- No very strange behavior; any siblings of the img fall where you’d expect them to.
- Fixes the inline whitespace problem for any siblings of the img.
- Although this still moves the position of the parent in the case of the parent and img both having `display: inline`, at least you can’t see the parent anymore.
- Less efficient code.
- This assumes «correct» markup; if the img has text node siblings, they won’t show up.
3) Setting line-height: 0 on the parent element:
Similar to the 2nd solution in that, to make it fully flexible, it basically becomes an extension of the 1st.
Как избавиться от пустого пространства после использования position: relative?
Какая задача: Сделать блок из 6 картинок, на каждой картинке сделать полупрозрачные стикеры, под картинкой сделать тайтл.
Какая проблема: Я оформляю стикер обычной надписью и поднимаю его в картинку через position: relative. В итоге появляется пустое место, от которого я не могу избавиться.
Можно с этим как-то справиться или есть какой-то другой способ создания таких стикеров?