phpjsJqueryhtmlcssblog

Зазоры между инлайн блоками

"отступы между инлайн блоками". Как убрать "Зазоры между inline блоками". Каждый раз встречаю данную проблему и каждый раз забываю... давайте разберемся и удалим ненавистные зазоры между inline блоками, с примерами! Только живые примеры!

Об удалении зазорах между inline блоками.

1. Удалим зазор между inline блоками с помощью "font-size"
2. Удалим зазор между inline блоками без css
3. Удалим зазор между inline блоками
4. Удалим зазор между 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 блоками и посмотрим результат:

Кнопка Кнопка Кнопка

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---