Почему появляется промежуток между div?

Question

[Владимир Голубь]

Верстаю в Bootstrap, не вносил изменения в файлы.
Структура следующая:

<div>
  <div>
     <button></button>
     <button></button>
  </div>
</div>

Главный div находиться в столбце bootstrap, его ширина 100%, у div с кнопками тоже 100%.
У кнопок ширина 50% и float left и right соответственно.

По мере изменения ширины между ними появляется промежуток, в чем проблема ? Причем даже изменение ширину на 1px дает разные результаты.

Answer 1

[Илья]

Если используете bootstrap то и формируйте сетку с помощью его классов, зачем велосипедить:

<div class='container'>
  <div class='row'>
     <button class='col-xs-6'></button>
     <button class='col-xs-6'></button>
  </div>
</div>

---
Класс 'row' убирает как раз таки отступы по бокам (margin'ы по 15px). литература

Comments

[Сергей Тутуков]

Какую же Вы дичь втираете)
По вашей логике:
- если контейнер 1000px и у него внутри два вложенных по 50%, то они по 500px каждый
- а если контейнер растянуть на 15px (1030px станет), то эти вложенные контейнеры не растянуться? останутся по 500px? Они по 50% !!!!!!!!!! Не фиксированная ширина, 50%!

и я смотрю, код у вас правильный)) велосипедить точно вы не будете, только кнопки вылезут из контейнера
codepen.io/STutukov/pen/EKvMvg

Почитайте литературу, чтобы понять для чего нужен класс row)) понятно что он растягивает контейнер.

[Илья]

sftutukov: "Понятно что он растягивает контейнер" - код контейнера не верный (у него еще отступы по 15px). Сделайте как надо, а потом поговорим про то что правильно

Answer 2

[khipster]

button {
margin: 0;
padding: 0;
}

Comments

[Владимир Голубь]

не помогает, как я понимаю это косяк bootstrap. Создал 3 колонки в одной отступ есть в другой нет. То есть ширина колонок разная ))). Переделал через display: inline и у одной кнопки сделал margin-left: -3px.

[Владимир Голубь]

box-sizing тоже везде прописал.

Answer 3

[shnicel]

попробуй так к примеру

<div>
  <div>
     <button class='col-lg-6 col-md-6 col-sm-6'></button>
     <button class='col-lg-6 col-md-6 col-sm-6'></button>
  </div>
</div>