"отступы между инлайн блоками". Как убрать "Зазоры между inline блоками". Каждый раз встречаю данную проблему и каждый раз забываю... давайте разберемся и удалим ненавистные зазоры между inline блоками, с примерами! Только живые примеры!
Об удалении зазорах между inline блоками.
- Удалим зазор между inline блоками с помощью "font-size"
- Удалим зазор между inline блоками без css
- Удалим зазор между inline блоками
- Удалим зазор между inline блоками переносом скобки
Удалим зазор между inline блоками с помощью "font-size"
Самый простой способ удаления зазоров/отступов между инлан блоками это "font-size" - для иллюстрации и воплощения этого вма понадобится:
Для начала ... давайте посмотрим как будут вести себя инлан блоки без удаления зазора, возьмем кнопку "button" , потому, что она имеет свойство по умолчанию inline:
<first>
<button>Кнопка</button>
<button>Кнопка</button>
<button>Кнопка</button>
</first>
Теперь давайте выведем всё кнопки прямо здесь, как видим... между блоками есть зазаор/отступ, который нам и нужно убрать!:
Добавим внутрь тега "first" одноименный класс и добавим ему "font-size" со значением "0px"
Соберем весь код:
Код удаления пробелов между инлайн блоками.
Css:
<style>
.first {
font-size: 0px;
}
</style>
Html:
<first class="first ">
<button>Кнопка</button>
<button>Кнопка</button>
<button>Кнопка</button>
</first>
Пример удаления зазоров/отступов между inline блоками.
Удалим зазор между inline блоками без css
Напрасно я первый пункт назвал самым простым! Ведь удалить зазоры/отступы между inline блоками можно вообще без css - для этого вам понадобится:
Нам нужен опять пример - давайте сделаем новый:
<example>
<button>Кнопка</button>
<button>Кнопка</button>
<button>Кнопка</button>
</example>
И опять же здесь выведем, как видим... у нас есть зазоры/промежутки между inline блоками:
Далее... расположим наши кнопки в одну линию:
<example>
<button>Кнопка</button><button>Кнопка</button><button>Кнопка</button>
</example>
Пример удаления промежутков между inline блоками
Теперь выведем наши блоки прямо здесь:
Удалим зазор между inline блоками
Следующий способ удаления зазора между inline блоками - закомментировать начало и конец строки:
Код удаления пробела между inline блоками
<example><!--
--><button>Кнопка</button><!--
--><button>Кнопка</button><!--
--><button>Кнопка</button><!--
--></example>
Пример удаления пробела между inline блоками
В очередной раз берем код, который будет удалять пробелы между инлан блоками, что вы видели вышще и разместим его прямо здесь:
Удалим зазор между inline блоками удаления скобки
Представил выше несколько способов, простых, чтобы не особенно заморачиваться и следующим пунктом также простой способ "удаления зазора между inline блоками удаления скобки" - для этого вам понадобится:
Применим уже ранее использованный код:
<example>
<button>Кнопка</button>
<button>Кнопка</button>
<button>Кнопка</button>
</example>
И на каждой строке с кнопками, кроме последней, уберем последнюю скобку кнопки, как показано на примере:
<example>
<button>Кнопка</button
<button>Кнопка</button
<button>Кнопка</button>
</example>
Пример удаления пробела между inline блоками
Снова разместим выше приведенный код удаления пробела между inline блоками и посмотрим результат:
