1

I have created a custom checkbox (codepen here). On clicking on the checkbox or the text, the checkbox should be checked/unchecked. It works for most part, but there is an annoying tiny space between the 2 lines of text, where it is not clickable (cursor doesn't change to pointer).

I can fix it by making .message as display block, and adjusting the top property of the tick (codepen here), so I am not asking for ways to fix it. I just want to know why it is behaving like that in the first case. I would appreciate any help on this.

<div class="cfux-field">
  <input type="checkbox" id="cbOptIn" />
  <label for="cbOptIn">
    <span class="message">Send me the latest news, travel tips and deals from XYZ Limited</span></label>
</div>

EDIT: I have found a partial answer and nkorth's answer, which although doesn't explain the reason, gave me a clue to it. The font-size on cfux-field is 16px and the line-height was normal (inherited from user-agent). As per MDN, line-height normal is roughly 1.2 depending on user-agent and font. As the label and message span are inline elements, so setting line-height on those doesn't make a difference and inherits the line-height from cfux-field.

So to make this work, there are 2 options:-

  1. Make label display block (looks like a better option as doesn't depend on how a particular browser calculates the content-height)
  2. Set font-size on cfux-field same as font-size that I want on the label.

But this doesn't explain why the increased line-height makes the content inaccessible (ie not clickable) - probably because of the way browsers calculate the content height - some explaination here.

Community
  • 1
  • 1
Abhishek Jain
  • 2,957
  • 23
  • 35
  • The problem is that the *hover-area* of an inline elment, is not the surrounding rectangle (bounding box). See: https://jsfiddle.net/61yncufv/2/ Whereas, this would be true for block elements. That's why your first fix is working. Though I would not advice using the line-height/font-size as a workaround. Better use `display: inline-block` (second span in the above example). – Yoshi Jun 30 '15 at 10:07

1 Answers1

1

I was able to fix it while keeping .message inline by adding:

.cfux-field {
  line-height: 1;
}

Setting the line-height on the label won't do anything, because it's an inline element. (For more details on this, see https://stackoverflow.com/a/9814390/685933.) This means the line-height used is the browser default. From MDN:

Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.

Here is an example showing two styles which don't remove the space and one style which does. Setting a background color on the inline element helps to visualize the clickable area.

Community
  • 1
  • 1
nkorth
  • 1,684
  • 1
  • 12
  • 28