Home / Questions / 383952
Accepted
Fernando Iam
Asked: 2020-08-23 05:50:31 +0800 CST 2020-08-23 05:50:31 +0800 CST

EM CSS calculation

  • 772

I want to put an example I have the following code. Without any css available

<body>
    <div id="main-container">
        <main>
            <h1 id="titulo">Database</h1>
            <input type="search" name="" id="input_search">
        </main>    
    </div>
  
</body>

Let's say I want to make it about 500px tall. Well, the question is, how should I do the calculations, to go from 500 px to em, is that I have seen that when a web page is created, the default font size is 16px, what I should do is the calculation from those 16px to receive how much em would I need? Is that if so, I do not understand why it is calculated by the source.

css

1 Answers

  1. Best Answer

    This concept must be clarified if the unit of measure emis relative to the size of the font or the one inherited by the font:

    to have a space of 500px: you must have the declared source set to a number X that multiplied by emyou gives 500px:

    Reference Documentation :

    This unit represents the calculated font-size of the element. If used within the font-size property, it represents the font size inherited by the element. This unit is generally used to create scalable interfaces, which maintain the vertical rhythm of the page, even when the user changes the font size. The CSS properties line-height, font-size, margin-bottom, and margin-top generally have values ​​expressed in em.

    Examples:

    html {
  font-size: 16px; /* 100% = 16px */
}
p {
  font-size: 1em; /* 1em = 16px */
}
h1 {
  font-size: 2em; /* 2em = 32px */
}
    <p>Ejemplo de 1 em</p>
<h1>Ejemplo de 2 em</h1>

    and is used to make the web responsiveif you set the one:

    html {
      font-size: 100%; /* 100% = 16px */
}

    It's good because you can have something like this:

    .component {
  width: 100%;
  border: 1px orange solid;
}
.component__header {
  font-size: 2rem;
  background-color: orange;
  color: white;
  padding: 1.5em 3rem; /* mezclando em y rem */
  margin: 0;
}
.component__header--large {
 font-size: 3rem;
}
.component__content {
 font-size: 1rem;
 padding: 1.5em 3rem;
 margin: 0;
}
    <div class="component">
  <div class="component__header component__header--large">Título Grande</div>
  <div class="component__content">
    Lorem fistrum quietooor nostrud exercitation pupita sed qui apetecan ese que llega jarl esse. Torpedo occaecat te va a hasé pupitaa eiusmod. Pecador va usté muy cargadoo quis quis minim. Et sed veniam diodenoo aliqua. Ex sit amet quietooor papaar papaar velit no puedor no puedor llevame al sircoo commodo. Elit va usté muy cargadoo nisi hasta luego Lucas ad reprehenderit a peich ex.
  </div>
</div>

<div class="component">
  <div class="component__header">Título</div>
  <div class="component__content">
    Lorem fistrum quietooor nostrud exercitation pupita sed qui apetecan ese que llega jarl esse. Torpedo occaecat te va a hasé pupitaa eiusmod. Pecador va usté muy cargadoo quis quis minim. Et sed veniam diodenoo aliqua. Ex sit amet quietooor papaar papaar velit no puedor no puedor llevame al sircoo commodo. Elit va usté muy cargadoo nisi hasta luego Lucas ad reprehenderit a peich ex.
  </div>
</div

    In short, you can make the design thinking of 500px but everything will depend on the size of the font that the user chooses; if the user sets the browser screen to 50% the box will be 250px; because it is relative to the font size.

    • 2