Jump to content

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


polaryeti
 Share

Go to solution Solved by kicken,

Recommended Posts

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.

Link to comment
Share on other sites

  • Solution

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.