When I meant “built-in”, I meant that it is not controlled by the CSS or by a reset. I am using the normalize.css, which is a type of reset, and it does not change any CSS for this basic example.
So I really think I found an issue in firefox with labels that have a built-in “space” below the text. I can’t call it padding or then you think “ah ok reset the CSS which”… is not possible. If you use the inspector you can see the layout of the label and see space below.
Please look at my codepen and see the difference between the div3 and div4. I used margin-top on the label to move it slightly down.
in particular, look at this part here, and please comment it. .div-3 { display: flex; align-items: center; label: { margin-top: 2px; } }
Using display overkill is a more drastic way to fix this, with more complexity, compared to that what I have done. But still interesting.
It seems quite similar, but you add the following. Please explain. Why do you need a top with display relative when the margin-top already can move the label vertically?
I have looked at your codepen and asked a question since I think yours is like mine with the relative top added. Maybe our answers crossed each other.
OK I understand the relative top now. You said it is so that we do not alter the flow of the document. WE do not add space in the overall document that will shift other objects.
But then why do you add a margin-top to the label? Is it not enough with the relative top?
Why do you prefer to use rem and not px? And why mix units with the top is in px not like the rest?
Vertical margins will affect the alignment in different ways because the elements on the row have their margins considered when using the flex alignment. As I already said you had margins on the input interfering with things which I negated on my example.
The method I used nudges only the label without affecting the flow at all and will not cause problems later on.
I can’t stress this enough but you seem to be jumping straight into the wrong thought processes with this and fighting battles that are not there. There is a lot of fine detail in css and understanding is the key
Because it respects my visitors preferences for their text. Unlike your 12px which I couldn’t read at all is far too small and disrespects my user settings.
Because I only wanted it moved by 1px. If I used rem and the user had enlarged their text size the distance would be miles out.
Always use rem/em for your fonts but other measurements can be what suits best for the task in hand.
Do you agree that the space below the label is built-in in firefox and not resetable by CSS?
Why is the space below the label built-in and not resettable using CSS?
It seems to me that the browser developer made this choice. This space actually helps to align the baseline since both the checkbox and the label have some space below.
Text is placed by default on the baseline and that allows lines of word to have a uniform appearance where ascenders and descenders go above and below the baseline as require.
With your label text you have not taken into account any letters that may have descenders (i.e. g, y etc.) and therefore may appear too low now that you moved it down.
There is a difference between bottom and `baseline.
You also do not factor in the type of font being used and the variations in browsers. How big is a font? Is it as tall as its tallest character and what if that character may have a descender?
How much leading is on top and bottom when the font was created by the font maker? Not all fonts have the same amount of space around them but all will have a half-leading top and bottom and glyphs will vary between platforms.
Not to mention the line-height that the text is sitting inside as this hasn’t been controlled either and so there could be extra space to take into account depending on the line height and its inlne-boxes which may affect the positioning once more.
Now - remind me which bit of space you are talking about:slight_smile: )
You didn’t have any descenders. If you remove the space for the descenders where will they go when you have some?
I’m talking about the inline formatting model and all its consequences. The method by which all items are laid out on a single line and how they interact with each other. inline elements create inline-boxes that all interact in some way. Its probably the most complicated part of CSS that few understand properly and makes your pixel precision (in this case) seem a bit of a lost cause.
You can read it here but you won’t understand much of it
