Ostatnio edytowany:

width

Autor: Virtual Patriot

Opis właściwości width

Za pomocą właściwości width możemy określić rozmiar szerokości obszaru zawartości interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości width

przeznaczenie
dziedziczenie
  • nie
wartość initial
wyjątki initial
animowanie
  • tak, lecz tylko wartość rozmiar

Interpretacja właściwości width

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości width

auto

Opis

Wartość auto jest domyślną wartością właściwości width.

Domyślnie element HTML posiada automatyczny rozmiar szerokości obszaru zawartości. Automatyczny rozmiar szerokości obszaru zawartości elementu HTML ustalany jest automatycznie przez przeglądarkę internetową na podstawie różnych czynników.

Sposoby ustalania przez przeglądarkę internetową automatycznego rozmiaru szerokości obszaru zawartości różnych elementów HTML

  • gdy element HTML jest typu block, list-item lub flex, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML dopasowuje się do rozmiaru szerokości obszaru zawartości najbliższego elementu przodka tworzącego blok treści
  • gdy element HTML jest typu inline, inline-block, table, inline-table, table-header-group, table-row-group, table-footer-group, table-row, table-cell lub inline-flex, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML dopasowuje się do ilości posiadanej treści do wyświetlenia przez dany element HTML, lecz rozmiar ten nie może przekroczyć rozmiaru szerokości obszaru zawartości najbliższego elementu przodka tworzącego blok treści
  • gdy element HTML jest typu table-caption, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML dopasowuje się do rozmiaru szerokości najszerszej posiadanej treści do wyświetlenia przez dany element HTML, lecz rozmiar ten nie może przekroczyć rozmiaru szerokości obszaru zawartości najbliższego elementu przodka tworzącego blok treści
  • gdy element HTML jest typu ruby, ruby-base, ruby-text lub ruby-text-container, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML dopasowuje się do ilości posiadanej treści do wyświetlenia przez dany element HTML
  • niezależnie od posiadanego typu, gdy element HTML jest pływającym elementem HTML, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML dopasowuje się do ilości posiadanej treści do wyświetlenia przez dany element HTML, lecz rozmiar ten nie może przekroczyć rozmiaru szerokości obszaru zawartości najbliższego elementu przodka tworzącego blok treści
  • niezależnie od wszystkich wyżej wymienionych zasad, gdy element HTML posiada pozycję absolute lub pozycję fixed, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML dopasowuje się do ilości posiadanej treści do wyświetlenia przez dany element HTML, lecz rozmiar ten nie może przekroczyć rozmiaru szerokości obszaru zawartości najbliższego elementu przodka, względem którego odbywa się pozycjonowanie danego elementu HTML

Gdy element HTML posiada pionowy tryb zapisu treści lub gdy element HTML należy do zawartości elementu HTML posiadającego pionowy tryb zapisu treści, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML ustalany jest przez przeglądarkę internetową na podstawie zasad, według których przeglądarka internetowa ustala automatyczny rozmiar wysokości obszaru zawartości elementu HTML posiadającego poziomy tryb zapisu treści.

Przykład

rozmiar szerokości obszaru zawartości tego elementu "div" został automatycznie określony przez przeglądarkę internetową

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 {
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar szerokości obszaru zawartości tego elementu "div" został automatycznie określony przez przeglądarkę internetową
    </div>

  </body>
</html>

rozmiar

Opis

Za pomocą właściwości width oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić rozmiar szerokości obszaru zawartości interesującego nas elementu HTML.

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru zawartości najbliższego elementu przodka tworzącego blok treści

Dla zaawansowanych

zasada dotycząca najbliższego elementu przodka tworzącego blok treści jest prawdziwa tylko wtedy, gdy element HTML, do którego chcemy dodać właściwość width wraz z wartością wyrażona za pomocą procentów posiada pozycję static lub pozycję relative (dla pozostałych typów pozycji należy zapoznać się dokładniej z poszczególnymi wartościami właściwości position)

wartość procentowa nie może zostać obliczona przez przeglądarkę internetową, gdy finalny rozmiar szerokości obszaru zawartości wspomnianego elementu przodka jest nieznany

sytuacje, gdy finalny rozmiar szerokości obszaru zawartości wspomnianego elementu przodka jest nieznany:

  • gdy element przodek posiada pionowy tryb zapisu treści oraz właściwość width wraz z wartością auto lub wartością wyrażoną za pomocą procentów, które nie mogą zostać obliczone przez przeglądarkę internetową, lecz tylko w sytuacji, gdy element HTML, do którego chcemy dodać właściwość width wraz z wartością wyrażona za pomocą procentów posiada pozycję static lub pozycję relative

Przykład

rozmiar szerokości obszaru zawartości tego elementu "div" wynosi 350 pikseli, ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "350px"

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:350px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar szerokości obszaru zawartości tego elementu "div" wynosi 350 pikseli, ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "350px"
    </div>

  </body>
</html>