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

[Anonymous]

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

Music Collection Catalog Lookup


RECORDS

TAPES

CDS


< /code>
my css: < /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>
Когда я обернул оба элемента и сделал этот дисплей обертки: Flex, все в порядке. Я хотел бы понять, какие причины эта странная смена макета ...? И это то, что я сделал приемлемое решение или я что -то здесь упускаю ....
Спасибо!

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