Ostatnio edytowany:

ex

Autor: Virtual Patriot

Przeznaczenie jednostki ex

Długość wyrażona za pomocą jednostki ex obliczana jest przez przeglądarkę internetową na podstawie rozmiaru wysokości małej litery x. Rozmiar wysokości małej litery x uzależniony jest między innymi od rodzaju czcionki tekstu (czyli od wartości właściwości font-family), jaką posiada dany element HTML.

"1ex" = rozmiar wysokości małej litery "x"

Jeżeli przeglądarka internetowa z jakiejś przyczyny nie może obliczyć długości wyrażonej za pomocą jednostki "ex", mimo że przeglądarka internetowa interpretuje jednostkę "ex", wtedy "1ex = 0.5em".

Przykład jednostki ex

  width:30ex;
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "30ex", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "30ex"
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "30ex", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "30ex"
rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "30ex", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "30ex"

Mimo że do każdego przykładowego elementu "div" została dodana właściwość "width" wraz z tą samą wartością, czyli wartością "30ex", ostatecznie obliczony przez przeglądarkę internetową rozmiar szerokości obszaru zawartości przykładowych elementów "div" jest różny, ponieważ każdy z przykładowych elementów "div" posiada różny rodzaj czcionki tekstu określony za pomocą właściwości "font-family", a co za tym idzie rozmiar wysokości małej litery "x" może być różny dla każdego z poszczególnych rodzajów czcionki tekstu.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        width:30ex;
        margin-bottom:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #pierwszy {
        font-family:serif;
      }

      #drugi {
        font-family:sans-serif;
      }

      #trzeci {
        font-family:monospace;
      }
    </style>
  </head>

  <body>

    <div id="pierwszy">
      rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "30ex", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "30ex"
    </div>

    <div id="drugi">
      rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "30ex", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "30ex"
    </div>

    <div id="trzeci">
      rozmiar szerokości obszaru zawartości tego elementu "div" wynosi "30ex", ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "30ex"
    </div>

  </body>
</html>

Interpretacja jednostki ex

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak