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

**URL:** <https://forum.kirupa.com/t/why-do-display-inline-for-radio-and-checkbox-label-only-when-already-each-label-is-set-to-inline-block/654817>\
**Category:** Uncategorized\
**Created:** [November 19, 2022, 6:07am UTC](https://forum.kirupa.com/t/why-do-display-inline-for-radio-and-checkbox-label-only-when-already-each-label-is-set-to-inline-block/654817 "2022-11-19T06:07:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [November 19, 2022, 6:07am UTC](https://forum.kirupa.com/t/why-do-display-inline-for-radio-and-checkbox-label-only-when-already-each-label-is-set-to-inline-block/654817/1 "2022-11-19T06:07:51Z")

</div>

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/embed/preview/PoaOJNL?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=PoaOJNL

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 19, 2022, 4:10pm UTC](https://forum.kirupa.com/t/why-do-display-inline-for-radio-and-checkbox-label-only-when-already-each-label-is-set-to-inline-block/654817/2 "2022-11-19T16:10:29Z")

</div>

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**? 😀

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [November 20, 2022, 3:23am UTC](https://forum.kirupa.com/t/why-do-display-inline-for-radio-and-checkbox-label-only-when-already-each-label-is-set-to-inline-block/654817/3 "2022-11-20T03:23:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 20, 2022, 4:03pm UTC](https://forum.kirupa.com/t/why-do-display-inline-for-radio-and-checkbox-label-only-when-already-each-label-is-set-to-inline-block/654817/4 "2022-11-20T16:03:41Z")

</div>

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 😀