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

element HTML tworzący blok treści, lecz nie element HTML typu table-header-group, table-row-group, table-footer-group, table-row

dziedziczenie

nie

wartość initial

auto

wyjątki initial

iframe, video, canvas

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

Przykład

  width:auto;
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:#CBFFFF;
      }
    </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 dokładniej zapoznać się z poszczególnymi wartościami właściwości position)

Przykład

  width:350px;
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:#CBFFFF;
      }
    </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>