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

[polaryeti]

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:

https://codepen.io/pelko/pen/PoaOJNL

What’s the need to do display:inline in “custom-label” class? Isn't that redundant.

[kicken]

As you noted,

3 hours ago, polaryeti said:

The only special feature of inline-block is that you can set width and height

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