Почему уезжает колонка с блоками?

Question

[Ольга]

Здравствуйте. На сайте сделала форму с кнопками, и почему-то при выборе пункта нижний уезжает. если выбрать все, всё стоит на своих местах.


В чём может быть проблема?

Answer 1

[Ankhena]

https://webref.ru/css/box-sizing поменяйте на border-box
либо border на outline или тень

Comments

[Ольга]

у меня вот так прописывается этот блок:

<div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
                    <div class="checkboxbank">
                     <input type="checkbox" class="check_bank" id="check0" name="bank[]" value="konsult.png:::Консультация">
                        <label class="flaticon-check" for="check0"><img class="pechati-img" src="images/banks/konsult.png" class="scale" alt="Нужна консультация"></label>
                    </div>
                </div>

Тут куда добавить border-box? К label добавила border-box, ничего не поменялось...

[Ankhena]

Ольга, Ольга, границы задаются в CSS, вы прислали кусок HTML.
Откуда я знаю, какому элементу вы задаете границу?
В общем: у кого появляется граница - тому и менять.
Причем, разумно в обычном состоянии задать границу цвета фона или прозрачную, чтобы не было скачков при наведении или фокусе.

[Ольга]

Ankhena, здравствуйте. до сих пор не получилось решить эту проблему. вот стили:

.checkboxbank input[type="checkbox"]:checked + label {
    border: 1px solid #da003e;
}
.checkboxbank input[type="checkbox"] + label {
    padding: 10px;
    float: left;
    width: 100%;
    /* min-height: 140px; */
    font-size: 18px;
    font-weight: 300;
    padding-bottom: 10px;
    cursor: pointer;
    text-align: center;

Ими и задаётся обводка. Прописала border-box - не помогло...

[Ankhena]

Ольга, всё вместе, пожалуйста, в песочницу jsfiddle.net или codepen.io
так, чтобы была видна проблема

И зачем лейблам флоат, если инпут скрыт и лейбл у родителя остается один?
Да и вообще, давно пора перестать верстать флоатами.

[Ankhena]

Ольга, типа того: https://jsfiddle.net/nfxyLg6b/