Блоки в ряд

@Mega Therion · Регистрация: 19.11.2014

Author24 — интернет-сервис помощи студентам

Код:

HTML5

<!DOCTYPE html>
<html>
<head>
    <title>RGBA в CSS3</title>
    <style>
        div.rgb {
            display: inline-block;
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
 
<div style="background: rgb(243, 191, 189);" class="rgb"></div>
<div style="background: rgb(246, 143, 142);" class="rgb"></div>
<div style="background: rgb(249, 95 , 94);"  class="rgb"></div>
<div style="background: rgb(252, 47, 47);"   class="rgb"></div>
<div style="background: rgb(255, 0, 0);"     class="rgb"></div>
 
</body>
</html>

В Хроме между блоками образуется пространство. Оно исчезает, если все блоки писать в строку, а не переносить каждый в новой строке.
Почему так происходит и как избавиться от этого?

@Fedor92 · 16.07.2015, 00:27

Mega Therion, используйте float:left вместо display:inline-block...

@RFusOlaXn · 16.07.2015, 00:27

Для борьбы с промежутками можно использовать несколько техник. Использование отрицательного значения margin:

CSS

nav a {
  display: inline-block;
  margin-right: -4px;
}

Установка значения font-size на ноль:

CSS

1
2
3

body {
  font-size: 0;
}

**Взято из учебника, не проверял, но это проблема именно inline-block

@Sn1p3rOk · 16.07.2015, 00:37

Отступы появились из-за пустого узла текста связанного с переводом строки.
Для вашего задание, самый приемлемый вариант выкладываю ниже.

HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>RGBA в CSS3</title>
        <style>
            div.rgb {
                display: inline-block;
                width: 40px;
                height: 40px;
                margin-left: -.36em;
            }
            
            div.rgb:first-child {
                margin-left: 0;
            }
        </style>
    </head>
    <body>
 
        <div style="background: rgb(243, 191, 189);"
             class="rgb"></div>
        <div style="background: rgb(246, 143, 142);"
             class="rgb"></div>
        <div style="background: rgb(249, 95 , 94);"
             class="rgb"></div>
        <div style="background: rgb(252, 47, 47);"
             class="rgb"></div>
        <div style="background: rgb(255, 0, 0);"
             class="rgb"></div>
 
    </body>
</html>

Добавлено через 1 минуту
Про другие варианты, если не подходит данный выше, почитайте по этой ссылке http://habrahabr.ru/post/137582/

Добавлено через 30 секунд
Либо же пишите все в одну строку.

@Николай108 · 16.07.2015, 08:18

Так вы через просмотр кода элемента посмотрите, что даёт эти отступы и уберите их. В крайнем случае, какой-нибудь отрицательный margin можно задать.

Новые блоги и статьи
Как программировать под HCL Notes и создавать свои продукты на ее основе InfoMaster 11.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой мощную платформу для разработки корпоративных приложений, которая сочетает в себе функции электронной почты, календаря,. . .	Как работать с SVN (Subversion) InfoMaster 11.01.2025 Введение Система контроля версий является неотъемлемой частью современного процесса разработки программного обеспечения. Она обеспечивает управление изменениями в коде, позволяет отслеживать. . .	Использование GraphQL в JavaScript InfoMaster 11.01.2025 Введение в GraphQL и его преимущества В современной разработке веб-приложений эффективный обмен данными между клиентом и сервером играет ключевую роль. GraphQL представляет собой язык запросов и. . .	Администрирование Git, продвинутые техники работы с Git InfoMaster 11.01.2025 Основы управления репозиторием Эффективное управление Git-репозиторием требует глубокого понимания механизмов контроля доступа и инструментов администрирования. Рассмотрим ключевые аспекты. . .	Что такое HCL Notes и как с ним работать InfoMaster 10.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой комплексную платформу для совместной работы и обмена информацией в корпоративной среде. Это многофункциональное решение,. . .	Как работать с Git из Windows и Visual Studio InfoMaster 10.01.2025 Работа с Git в Windows Работа с Git в операционной системе Windows может быть осуществлена с помощью различных инструментов, каждый из которых обладает своими уникальными возможностями и. . .
Аналог оператора switch case в Python InfoMaster 10.01.2025 Оператор switch case используется в программировании для выбора одного из нескольких вариантов исполнения кода. Однако в языке Python этот оператор отсутствует. Понимание аналогов switch case в. . .	Отличия абстрактного класса от интерфейса InfoMaster 10.01.2025 В современной разработке программного обеспечения существуют два основных механизма реализации абстракции: абстрактные классы и интерфейсы. Эти инструменты, хотя и схожи в своей основной цели -. . .	Как работать в Git InfoMaster 10.01.2025 Git — это одна из наиболее популярных систем контроля версий, которая активно используется разработчиками по всему миру. Она позволяет эффективно управлять изменениями в коде, координировать работу. . .	Реализация передвижения персонажа в Unity3d на C# InfoMaster 10.01.2025 Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .	Docker: руководство для начинающих InfoMaster 10.01.2025 В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .	Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	16.07.2015, 00:27	2
	Mega Therion, используйте float:left вместо display:inline-block... 0

@Николай108 2 / 2 / 0 Регистрация: 30.06.2015 Сообщений: 103
	16.07.2015, 08:18	5
	Так вы через просмотр кода элемента посмотрите, что даёт эти отступы и уберите их. В крайнем случае, какой-нибудь отрицательный margin можно задать. 0

Блоки в ряд

Решение