Geek asks and answers

How is CSS em measured for height or border?

I understand that the "em" dimension is a relative unit for the font size relative to the font size of the containing element if it is specified in an absolute unit, such as px, or in the default font size in the browser.

But I'm trying to understand how em works as a measure of the radius of the border of a box element, like a div. I assume this is due to how em works as a measure of the width or height of a box.

Is this related to font size? How exactly is this measured? The explanations of how the border radius that I could find are calculated, all are apparently based on px units.

+5
source share
3 answers

, , , . 12px, 1em, 12px (13px, 13px). , , , . , , :

<style>
  // lets say the browser gives the text a default size of 16px on a pc
  .box {border-radius:5px}// lets say the box size scales with the text
</style>

, . , , iphone, 80px (), , . , , em.

0

, . , , , px.

, .

:

<div id="A"></div>
<div id="B"></div>
<div id="text-height"></div>
<p>Some text</p>

<div id="C"></div>
<div id="D"></div>

CSS

p {
    line-height: 1em;
    background: grey;
    display: inline-block;
    position: relative;
    top: -4px;
}
#A {
    height: 4em;
    background: red;
    width: 1em;
    display: inline-block;
}
#B {
    height: 2em;
    background: blue;
    width: 1em;
    display: inline-block;
}
#text-height {
    height: 1em;
    background: green;
    width: 1em;
    display: inline-block;
}
#C, #D {
    height: 4em;
    width: 4em;
    display: inline-block;
}
#C {
    border-radius: 2em;
    background: red;
}
#D {
    border-radius: 1em;
    background: blue;
}

enter image description here

+1

I tried this in a browser and it still refers to the font-size property of the element . If the font size is not defined, it is inherited from the next parent with the font size or the default for the browser ( which is usually 16px TIL).

+1
source

More articles:


All Articles