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?
kirupa
November 19, 2022, 4:10pm
2
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 ?
1 Like
Got it. Adding display: inline prevents the width: 25% from having an effect on those elements.
kirupa
November 20, 2022, 4:03pm
4
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