Hello,
I’m learning how to use CSS and how to build out my sources, and I’ve noticed that the levels and screen sizes vary depending on the browsers I’m using.
Although the height is simple, it still has a difference.
It is constant with 53px for the select and 53px for the suggestions in Chrome.
In Safari, it remains 53px, 53px.
However, Firefox gives you 53px for the find and 53.5px for the output. However, the type size increases to 54px if I move my glass to a larger screen.
The another funny thing is that if I set the line height to 1.3333, it stays the same on Chromium but differs on Safari and Firefox.
What would be the best course of action? Am I missing a crucial thing? Am I supposed to set a specific height ( my understanding was that the padding would handle that and I shouldn’t need to set a level )?
Firefox with line-height of 1.5 ( input 54px, select 53px )
Safari with line-height of 1. 333
Thanks 
Not wholly pertinent, but…
I did… stop worrying about a 1 pixels change.
You’re talking about 1 / 768th of the screen’s length even on an XGA screen.
Computers are free to choose their own multiplier round techniques. They are also free to set their own default ( “normal” ) line-height value, which may or may not be affected by the font being used.
So how does Safari differ? Let’s say your font size is 18, and your covering ( on the top and bottom ) is 0. 75 sleep, so we would need to know what the font size of the Root aspect is. That would be 16px for most sites, which uses 0.75 rem 12 images, unless you’ve changed it ( which it doesn’t appear to have ). Your boundary is 1 px
Due to the border-radius, there is likely some additional scooping involved. ( Chrome even informs me that your border’s actual calculated width is 1.25px. )
So let’s just take a jump at it.
18 * 1.5 = 27 ( Computed Line Height )
2* ( 16 * 0.75 ) = 24 ( Computed Padding )
2*1.25 = 2.5 ( Computed Border )
27+24+2.5 = 53.5 px ( Total Size )
What is the right whole-number pixel to create your element if it is 53.5px?
Which means large do you go?
Which way will your computer round you?
Does the amount change based on the border width that was calculated?
Does the determined border length depend on the website? And how much depends on the aspect being used?
2 Likes
The most accurate way to use line level for input and appoints is to directly set the level so that they match. Use of 53px level in your case solves the issue.
You get a variety of distinctions because appoints and inputs have different algorithms, which has been really annoying over time. In your case, the custom font is altering the domestic line-height and, in some cases, causes a 2px height discrepancy due to the 1.3333 line-height setting.
This will be fixed by changing the line-height and increasing the top.
You also need to keep in mind that some sites may attempt to track split images while others won’t. Although there isn’t really a third pixel assessment, browsers like Firefox did remember them and alter the appearance to make it appear half a pixel. Others may simply rounded up or down. For example, if the top and bottom mah covering equals 13.5px on the top and bottom, some browsers will not follow that rule, leading to a discrepancy in full height.
Setting a slope for inputs and selects is not really a problem because the word doesn’t cover in any way, but it probably needs to be a deep level for text to scale.
This test was given to me over eleven years before, but it still has relevance today and demonstrates the issues that have shaped history.
Once it becomes widely used, the new customized limited might be simpler to use. More details are available below.
2 Likes
and keep in mind that we’re talking about mathematics, where decimals are appropriate… at the physical level, your monitor may only generate a certain number of pixels because they are undivided units at the real scale of your monitor. But certainly, round is necessary.
2 Likes
It has more to do with how they are laid out diagonally. That distinction is obvious.
Thank you for your reason. The answer is to use an obvious benefit rather than an inherent one, Paul said below. This addresses the issue and the variations in how sites perform estimates.
Thank you very much for your thorough reply. That is really intelligent.
In everything I build, I always try to get the elevation indirectly rather than directly, but an explicit value makes a lot of sense for something like this, where there are many determining factors.
Would you also add that padding-block is optional? Padding-block becomes superfluous as the type contains only one line of text and the elevation is explicitly set to?
Thanks
Thanks
Just padding-inline and top are necessary for CSS.
I did leave it at zero unless you find something strange because it doesn’t seem to matter. Although I have performed a few tests, none are complete.
1 Like