width: 100% съедает margin между блоками
Есть flex-контейнер. В нём четыре кнопки, они должны занимать 100% экрана. Между кнопками есть небольшой отступ в один пиксель. Для красоты. Но есть проблема: кнопки находятся внутри своих div-блоков, а эти div-блоки уже внутри flex-контейнера. Мы задали ширину для div, но не для кнопки и потому её размер минимально возможный.
Для решения этой проблемы я нашёл два способа:
- Превратить div-блоки тоже в flex-контейнер с одним элементом и задать кнопке
flex: 1 0 auto; - Задать для кнопки
width: 100%
Оба способа работают, но во втором отступ между кнопками пропадает. Почему?
Да, я уже понял свою ошибку, надо было margin ставить для div-блоков, а не самих кнопок. Но я всё ещё не понимаю, почему этот margin исчезает.
/* Основной стиль */
.html, .body, .container {
width: 100%;
}
.container {
display: flex;
/* border: 1px solid red; */
}
.button-container {
width: 25%;
}
.button-container button {
/* Тот самый пробел между кнопками */
margin: 0 1px 0 0;
background-color: #e0e0e0;
font-size: 1.5rem;
border: 0;
}
.button-container:last-child {
margin: 0 0 0 0;
}
/* Первый способ расширить кнопку */
/*
.button-container {
display: flex;
}
.button-container button {
flex: 1 0 auto;
}
*/
/* Второй способ расширить кнопку */
.button-container button {
width: 100%;
height: 100%;
}<div class="container">
<div class="button-container"><button>1</button></div>
<div class="button-container"><button>2</button></div>
<div class="button-container"><button>3</button></div>
<div class="button-container"><button>4</button></div>
</div>