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

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

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, chyba że rozmiar szerokości obszaru zawartości wspomnianego elementu przodka jest mniejszy od rozmiaru szerokości największej pojedynczej posiadanej treści do wyświetlenia przez dany element HTML
  • gdy element HTML jest typu table-caption, wtedy automatyczny rozmiar szerokości obszaru zawartości elementu HTML dopasowuje się do rozmiaru szerokości największej pojedynczej posiadanej treści do wyświetlenia przez dany element HTML
  • 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, chyba że rozmiar szerokości obszaru zawartości wspomnianego elementu przodka jest mniejszy od rozmiaru szerokości największej pojedynczej posiadanej treści do wyświetlenia przez dany element HTML
  • gdy jakikolwiek do tej pory wymieniony element HTML jest elementem dzieckiem elementu HTML, którego treść została podzielona na kolumny, wtedy zasada dotycząca rozmiaru szerokości obszaru zawartości najbliższego elementu przodka tworzącego blok treści tyczy się rozmiaru szerokości kolumny, do której należy dany element dziecko
  • gdy elementy dzieci elementu HTML typu flex lub inline-flex posiadają wierszowy kierunek układania się, wtedy automatyczny rozmiar szerokości obszaru zawartości danych elementów dzieci ustalany jest przez przeglądarkę internetową na podobnych zasadach do zasadach, na podstawie których przeglądarka internetowa ustala automatyczny rozmiar szerokości obszaru zawartości elementu HTML typu inline-block, natomiast gdy elementy dzieci elementu HTML typu flex lub inline-flex posiadają kolumnowy kierunek układania się, wtedy automatyczny rozmiar szerokości obszaru zawartości danych elementów dzieci ustalany jest przez przeglądarkę internetową na podobnych zasadach do zasadach, na podstawie których przeglądarka internetowa ustala automatyczny rozmiar szerokości obszaru zawartości elementu HTML typu block, ponadto właściwość flex-grow może na swój sposób wpływać na automatyczny rozmiar szerokości obszaru zawartości elementów dzieci elementu HTML typu flex lub inline-flex
  • 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, chyba że rozmiar szerokości obszaru zawartości wspomnianego elementu przodka jest mniejszy od rozmiaru szerokości największej pojedynczej posiadanej treści do wyświetlenia przez dany element 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

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>