Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Rozmiary

Szerokość

Email Drukuj PDF

Tematy: szerokość | szerokość minimalna | szerokość maksymalna | wysokość | wysokość minimalna | wysokość maksymalna

Dane w pigułce
Zastosowanie określenie szerokości elementu
Dziedziczenie nie
Wartości wartość w jednostkach lub procentach, auto (automatyczna)
Wartość domyślna auto
Przykład width:200pt;
Uwagi wartość procentowa określana jest w stosunku do elementu nadrzędnego
Odpowiednik w HTML atrybut width

Aby zdefiniować szerokość elementu blokowego, należy wpisać w definicji stylu width: wartość.

Polecenie ustala szerokość elementu.

<p style="width: 150px">Treść akapitu </p>

To jest akapit o szerokości 150 pikseli.

To jest akapit o szerokości 15 cm. To jest akapit o szerokości 15 cm. To jest akapit o szerokości 15 cm.

<p style="width:80%">Treść akapitu</p>

Akapit o szerokości 80% (elementu nadrzędnego w hierarchii, czyli tutaj szerokości bloku). Akapit o szerokości 80% (elementu nadrzędnego w hierarchii, czyli tutaj szerokości bloku).

Tabela o szerokości 10 cm.

<table style="width: 10cm; border: solid 1px black;">

To jest komórka 1.1 To jest komórka 1.1. To jest komórka 1.2 To jest komórka 1.2.
To jest komórka 2.1 To jest komórka 2.1. To jest komórka 2.2 To jest komórka 2.2.

Obrazek o wymuszonej szerokości 4cm.

<img src="kubus.jpg" alt="Małpka Kubuś w schronisku na Paluchu" style="width: 4cm; border: solid 1px">

Małpka Kubuś w schronisku na Paluchu

Wykaz o szerokości 7cm.

<ul style="width: 7cm">

  • punkt 1 punkt 1 punkt 1 punkt 1 punkt 1 punkt 1
  • punkt 2 punkt 2 punkt 2 punkt 2 punkt 2 punkt 2
  • punkt 3 punkt 3 punkt 3 punkt 3 punkt 3 punkt 3

Linia o szerokości 50 procent elementu nadrzędnego.

<hr style="width: 50%">



Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V