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.

Informacje dodatkowe

brak

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

pozycja

dowolna

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

Interpretuje wartość min-content, max-content oraz fit-content, lecz z przedrostkiem "-moz-", czyli na przykład "-moz-min-content".

Dla wartości stretch interpretuje tylko zapis alternatywny "-moz-available".

Google Chrome

tak

Dla wartości stretch interpretuje tylko zapis alternatywny "-webkit-fill-available".

Safari

tak

Opera

tak

Dla wartości stretch interpretuje tylko zapis alternatywny "-webkit-fill-available".

Internet Explorer

tak

Nie interpretuje wartości stretch, min-content, max-content oraz fit-content.

Edge

tak

Nie interpretuje wartości stretch, min-content, max-content oraz fit-content.

Zobacz więcej informacji o interpretacji wartości , , , właściwości "width".

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, flex lub grid, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości stretch
  • gdy element HTML jest typu inline, inline-block, table, inline-table, table-header-group, table-row-group, table-footer-group, table-row, table-cell, inline-flex lub inline-grid, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości fit-content
  • gdy element HTML jest typu table-caption, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości min-content
  • gdy element HTML jest typu ruby, ruby-base, ruby-text lub ruby-text-container, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości max-content
  • niezależnie od posiadanego typu, gdy element HTML jest pływającym elementem HTML, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości fit-content
  • niezależnie od posiadanego typu, gdy element HTML jest elementem dzieckiem elementu HTML typu flex lub inline-flex oraz gdy element HTML typu flex lub inline-flex posiada wierszowy kierunek układania się dla elementów dzieci, wtedy automatyczny rozmiar szerokości obszaru zawartości elementów dzieci ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości fit-content, natomiast gdy element HTML typu flex lub inline-flex posiada kolumnowy kierunek układania się dla elementów dzieci, wtedy automatyczny rozmiar szerokości obszaru zawartości elementów dzieci ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości stretch
  • niezależnie od posiadanego typu, gdy element HTML jest elementem HTML należącym do siatki elementu HTML typu grid lub inline-grid, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości fit-content, chyba że wartość właściwości justify-self danego elementu HTML wskazuje na wartość stretch, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości stretch
  • 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 ustalany jest przez przeglądarkę internetową w taki sam sposób, jak dla wartości fit-content, ponadto gdy element HTML posiada właściwość left wraz z wartością różną od wartości auto oraz właściwość right wraz z wartością różną od wartości auto, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML dodatkowo może zostać rozciągnięty względem lewej oraz prawej krawędzi obszaru pozycjonowania

Gdy automatyczny rozmiar szerokości elementu HTML w jakikolwiek sposób uzależniony jest od posiadanej treści do wyświetlenia przez ten element HTML, wtedy rozmiar szerokości siatki elementu HTML typu inline-grid może również wpłynąć na finalnie ustalony przez przeglądarkę internetową automatyczny rozmiar szerokości tego 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 powiązanego elementu przodka

gdy dany element HTML jest elementem HTML należącym do siatki elementu HTML tworzącego układ siatki, wtedy wartości procentowe liczone są względem aktualnego rozmiaru znajdującego się pomiędzy początkową krawędzią kolumnową, a końcową krawędzią kolumnową miejsca, do którego został przypisany dany element HTML

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>

stretch

Opis

Za pomocą wartości stretch właściwości width możemy sprawić, że rozmiar szerokości obszaru zawartości interesującego nas elementu HTML zostanie rozciągnięty wzdłuż rozmiaru szerokości wolnej przestrzeni obszaru, do którego należy ten element HTML.

Przykład

  width:stretch;
div#rodzic
div#dziecko

Rozmiar szerokości obszaru zawartości przykładowego elementu "div#dziecko" został rozciągnięty wzdłuż rozmiaru szerokości wolnej przestrzeni obszaru zawartości przykładowego elementu "div#rodzic", ponieważ do wspomnianego elementu "div#dziecko" została dodana właściwość "width" wraz z wartością "stretch".

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;
      }

      #rodzic {
        width:300px;
        padding:1em;
        font-size:1.3em;
        background-color:red;
      }

      #dziecko {
        width:stretch;
        width:-moz-available;
        width:-webkit-fill-available;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">div#rodzic
      <div id="dziecko">div#dziecko</div>
    </div>

  </body>
</html>

min-content

Opis

Za pomocą wartości min-content właściwości width możemy sprawić, że rozmiar szerokości obszaru zawartości interesującego nas elementu HTML uzależniony będzie od najszerszej pojedynczej posiadanej treści do wyświetlenia przez ten element HTML.

Informacje dodatkowe

gdy rozmiar szerokości elementu HTML nie znajduje się pomiędzy początkową oraz końcową krawędzią liniową tego elementu HTML, czyli na osi liniowej, wtedy wartość min-content działa na takiej samej zasadzie, jak wartość auto

Przykład

  width:min-content;
ABCD EFGHIJK LM NOP QRSTU V WXYZ

Rozmiar szerokości obszaru zawartości przykładowego elementu "div" uzależniony jest od najszerszej pojedynczej posiadanej treści do wyświetlenia przez przykładowy element "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "width" wraz z wartością "min-content" (w tym wypadku wspomnianą treścią jest ciąg znaków "EFGHIJK").

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:min-content;
        width:-moz-min-content;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ABCD EFGHIJK LM NOP QRSTU V WXYZ
    </div>

  </body>
</html>

max-content

Opis

Za pomocą wartości max-content właściwości width możemy sprawić, że rozmiar szerokości obszaru zawartości interesującego nas elementu HTML uzależniony będzie od możliwie najszerszej posiadanej treści do wyświetlenia przez ten element HTML.

Informacje dodatkowe

gdy rozmiar szerokości elementu HTML nie znajduje się pomiędzy początkową oraz końcową krawędzią liniową tego elementu HTML, czyli na osi liniowej, wtedy wartość max-content działa na takiej samej zasadzie, jak wartość auto

Przykład

  width:max-content;
ABCD EFGHIJK LM NOP QRSTU V WXYZ

Rozmiar szerokości obszaru zawartości przykładowego elementu "div" uzależniony jest od możliwie najszerszej posiadanej treści do wyświetlenia przez przykładowy element "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "width" wraz z wartością "max-content" (w tym wypadku wspomnianą treścią jest ciąg znaków "ABCD EFGHIJK LM NOP QRSTU V WXYZ").

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:max-content;
        width:-moz-max-content;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ABCD EFGHIJK LM NOP QRSTU V WXYZ
    </div>

  </body>
</html>

fit-content

Opis

Za pomocą wartości fit-content właściwości width możemy sprawić, że wartością rozmiaru szerokości obszaru zawartości interesującego nas elementu HTML będzie możliwie największa wartość mieszcząca się w zakresie wartości od min-content do max-content.

W tym wypadku wartość większa od wartości min-content nie może powodować przepełnienia.

W tym wypadku rozmiarem szerokości obszaru zawartości elementu HTML reprezentującego treść zewnętrzną (plik graficzny, plik audio, plik video itp.) będzie rozmiar, na który wskazuje wartość min-content, ponadto rozmiar ten może zostać dodatkowo równomiernie przeskalowany na podstawie posiadanej przez element HTML wartości właściwości height.

Informacje dodatkowe

gdy rozmiar szerokości elementu HTML nie znajduje się pomiędzy początkową oraz końcową krawędzią liniową tego elementu HTML, czyli na osi liniowej, wtedy wartość fit-content działa na takiej samej zasadzie, jak wartość auto

Przykład

  width:fit-content;
div#rodzic
DIV#DZIECKO ABCD EFGHIJK LM NOP QRSTU V WXYZ

Wartością rozmiaru szerokości obszaru zawartości przykładowego elementu "div#dziecko" jest możliwie największa wartość mieszcząca się w zakresie wartości od "min-content" do "max-content" oraz niepowodująca przepełnienia rozmiaru szerokości obszaru zawartości przykładowego elementu "div#rodzic", ponieważ do wspomnianego elementu "div#dziecko" została dodana właściwość "width" wraz z wartością "fit-content".

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;
      }

      #rodzic {
        width:300px;
        padding:1em;
        font-size:1.3em;
        background-color:red;
      }

      #dziecko {
        width:fit-content;
        width:-moz-fit-content;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      div#rodzic
      <div id="dziecko">
        DIV#DZIECKO ABCD EFGHIJK LM NOP QRSTU V WXYZ
      </div>
    </div>

  </body>
</html>