Попытка понять странную смену макета CSS ⇐ CSS

[Anonymous]

Я самоучка, и даже если у меня есть что-то, чтобы работать, я не люблю двигаться дальше, если я не понимаю, почему что-то сейчас работает. Три - это радиопроизводство с дисплеем: нет; и три - этикетки, которые являются видимыми элементами. У меня есть стиль на псевдо-классе :: Проверено , который немного изменяет размер ярлыков. Когда элемент inline-grid не обернут в следующую строку, я столкнулся с проблемами с макетом. Когда выбирается первое из трех детей, макет немного сдвигается, но не при выборе ни второго, ни третьего ребенка. < /P>
my code: < /p>


*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background-color: rgb(236, 236, 236);
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
min-height: 100vh;
}

h1 {
color: rgb(113, 0, 179);
display: inline-block;
margin-block: 1.5rem;
margin-inline: 1.25rem 5.5rem;
}

.format-select-wrapper {
align-items: end;
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;
margin-bottom: 1rem;
width: 627px;
}

input[type="radio"] {
display: none;
}

label {
background: rgb(113, 0, 179);
border-radius: 5px;
box-shadow: 0px 2px 0px black;
color: whitesmoke;
cursor: pointer;
font-weight: 600;
letter-spacing: 1px;
margin-inline: auto;
padding: 1.25rem 2rem;
text-align: center;
text-box-edge: cap alphabetic;
text-box-trim: trim-both;
user-select: none;
width: 95%;
}

label:hover,
label:focus-visible {
background: rgb(84, 44, 102);
}

input[type="radio"]:checked + label {
background: rgb(158, 0, 250);
font-size: 0.9rem;
height: 47px;
width: 175px;
}< /code>

Код: Выделить всё

Music Collection Catalog Lookup



RECORDS

TAPES

CDS

Когда я обернул оба элемента, и сделан этот дисплей обертки: flex; , все в порядке. Я хотел бы понять, что вызывает странный сдвиг макета. Наконец, что я сделал приемлемое решение или я что -то упускаю здесь?

Подробнее здесь: https://stackoverflow.com/questions/796 ... yout-shift