Why do display:inline for radio and checkbox label only when already each label is set to inline-block?

Here, custom-label class consists of radio and checkbox labels.

The only special feature of inline-block is that you can set width and height like block(and everything appears on same line like inline).

label {
  display: inline-block;
  width: 25%;
  font-weight:bold;
  color: rgb(2,2,149);
  font-size:20px;
}
.custom-label{
  display:inline;
}

Say we’ve a situation like this.

Full code here:

What’s the need to do display:inline in “custom-label” class? Is it redundant?

Just for kicks, have you tried to bring up the Chrome DevTools on this example, inspected the element, and toggled the inline CSS style on or off? :grinning:

1 Like

Got it. Adding display: inline prevents the width: 25% from having an effect on those elements.

Yes! I rarely know what is going to happen in many CSS situations by reading the markup. I just click around in the devtools and learn by observation. This is doubly true for layouts using Flexbox or Grid :grinning: