Ostatnio edytowany:

max-width

Autor: Virtual Patriot

Opis właściwości max-width

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

Dodatkowe techniczne informacje o właściwości max-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

none

wyjątki initial

brak

animowanie

tak, lecz tylko wartość rozmiar

Interpretacja właściwości max-width

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 7

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

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

none

Opis

Wartość none jest domyślną wartością właściwości max-width.

Domyślnie element HTML nie posiada określonego rozmiaru maksymalnej szerokości obszaru zawartości.

Przykład

  max-width:none;
ten element "div" nie posiada określonego rozmiaru maksymalnej szerokości obszaru zawartości

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>
      ten element "div" nie posiada określonego rozmiaru maksymalnej szerokości obszaru zawartości
    </div>

  </body>
</html>

rozmiar

Opis

Za pomocą właściwości max-width oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić rozmiar maksymalnej 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ść max-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

  max-width:350px;
rozmiar maksymalnej szerokości obszaru zawartości tego elementu "div" wynosi 350 pikseli, ponieważ do tego elementu "div" została dodana właściwość "max-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 {
        max-width:350px;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>