Удаление пустого места в div

У меня есть div с 3 кнопками, с некоторыми примененными CSS. (JSFiddle).

Я хочу удалить пустое пространство между рамкой div и кнопками. Я новичок в HTML и CSS, поэтому думаю, что это легко исправить.

.navBar {
  display: block;
  border: 5px solid black;
  width: 521.5px;
  position: sticky;
  margin-left: auto;
  margin-right: auto;
  top: 2px;
}

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  background-color: #555555;
  transition-duration: 0.4s;
}

<div class = "navBar">
    <button type = "button" class = "button">text1</button>
    <button type = "button" class = "button" >text2</button>
    <button type = "button" class = "button">text3</button>
</div>

Самый простой и чистый способ: если вам не нужны пробелы, не ставьте их на первое место. У </button><button … не будет места между ними.

— 15.09.2018 18:58

Большое спасибо! это сработало!

— 15.09.2018 19:01

пространство между inline-block на самом деле является символом новой строки, поэтому его можно удалить с помощью font-size: 0

— 15.09.2018 19:05

html css

15.09.2018 18:55

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 2

Если вы хотите, чтобы пуговицы поместились в обертку. Тогда это может вам помочь.

.navBar {
    display: block;
    border: 5px solid black;
    width: 521.5px;
    position: sticky;
    margin-left: auto;
    margin-right: auto;
    top: 2px;
    display: flex;
}

.button {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    background-color: #555555;
    transition-duration: 0.4s;
    margin: 0 0.5%;
    width: 33%;
}

.button:hover {
    background-color: white;
    color: black;
}

<div class = "navBar">
    <button type = "button" class = "button">text1</button>
    <button type = "button" class = "button" >text2</button>
    <button type = "button" class = "button">text3</button>
</div>

15.09.2018 19:05

Во многих случаях у вас нет контроля над белым интервалом в визуализированном HTML, например если ваша CMS генерирует HTML.

Чтобы решить проблему с пробелами, которая возникает с макетами на основе display: inline-block;, стандартным методом является установка font-size: 0; для родительского элемента, а затем повторная установка размера шрифта для дочерних элементов в соответствии с вашими требованиями.

.navBar {
  display: block;
  border: 5px solid black;
  width: 521.5px;
  position: sticky;
  margin-left: auto;
  margin-right: auto;
  top: 2px;
  font-size: 0;
}

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  background-color: #555555;
  transition-duration: 0.4s;
  font-size: 16px;
}

<div class = "navBar">
  <button type = "button" class = "button">text1</button>
  <button type = "button" class = "button">text2</button>
  <button type = "button" class = "button">text3</button>
</div>

15.09.2018 19:06

Другие вопросы по теме

HTML и CSS: прокрутите Y, но держите X

Как открыть развал меню при наведении мышки?

Как добавить текст под иконки шрифтов?

Продолжительность перехода, как я могу это сказать, когда я нажимаю кнопку, которая отображает меню

Применить стиль CSS ко всем столбцам таблицы

Попутный ветер css непрозрачность

Как с помощью CSS анимировать вертикальные линии, растущие вверх и вниз?

Добавить 2 css анимации к одному элементу

Как поднять одну карту в группе карт css

Как отключить максимальную ширину веб-представления Evernote с помощью JavaScript?

Удаление пустого места в div

Ответы 2

Другие вопросы по теме

Похожие вопросы