Width – Szerokość Elementu HTML

Width – Szerokość Elementu HTML

Domyślnie szerokość elementu body równa jest szerokości okna przeglądarki. Co to znaczy? Oznacza to, że szerokość elementu body domyślnie dostosuje się do szerokości okna przeglądarki internetowej. Znowu, jej szerokość będzie zależna od szerokości naszego ekranu, czyli jego rozdzielczości.

Domyślnie szerokość elementu blokowego (np. div) równa jest szerokości rodzica, w którym jest on zagnieżdżony. Zatem szerokość elementu <div>,wstawionego bezpośrednio do elementu body, będzie równa jego szerokości.

div body width szerokosc element blokowy kurs html

Szerokość elementów blokowych może być dowolnie zmieniana. W tym celu posługujemy się zasadą CSS o nazwie width (z ang, szerokość). Szerokość najczęściej przyjmuje wartości stałe, wyrażane w px (pixel), czyli w pikselach.

div { width: 450px; }

width div px fixed layout kurs html

Szerokość elementu może być również wyrażana w wartościach względnych do szerokości rodzica. Mogą to być np. % (procenty). Jeśli rodzic (tak jak w naszym przykładzie) ma 600px szerokości, a szerokość elementu w nim zagnieżdżonego ustalimy na 75%, to z prostej matematyki wyjdzie nam 450px.

div { width: 75%; }

relative width div element kurs html

Jednak, jeśli zapiszemy powyższe przykłady definiując jedynie szerokość elementu, to nic nam na ekranie się nie pojawi.

<html>
<body>
   <style>
      div { width: 450px; }
   </style>
   <div></div>
</body>
</html>

Zobaczmy dlaczego tak się dzieje?

Element liniowy – zostanie wyświetlony na ekranie, tylko w sytuacji, gdy dodamy treść do tego elementu.

<a href="#"></a> - Nie wyświetli się
<a href="#">Link</a> - Zostanie wyświetlony

Element blokowy – zostanie wyświetlony, gdy zaistnieje jedna z dwóch sytuacji, gdy dodamy do niego treść, bądź zdefiniujemy szerokość (width) oraz wysokość (height) elementu blokowego.

Zastosujemy ogólny selektor elementu div, aby dodać kolor tła do wszystkich elementów div.

div { background-color: #fab949; }
.box-1 {}
.box-2 {}
.box-3 { width:50px; height: 50px; }
.box-4 { width: 50px; }
.box-5 { height: 50px; }

Zostanie wyświetlony?

<div class="box-1"></div> - Nie
<div class="box-2">Box-2</div> - Tak
<div class="box-3"></div> - Tak
<div class="box-4"></div> - Nie
<div class="box-5"></div> - Nie
Box-2

Z powyższego przykładu możemy zaobserwować kilka ciekawych rzeczy.

box-1, box-4, box-5
Elementy, który nie były wypełnione tekstem, ani nie miały zdefiniowanych obydwu parametrów, czyli wysokości, ani szerokości nie wyświetliły na się wcale .

box-2
Element, który został wypełniony tekstem, ale nie miał zdefiniowanej wysokości, ani szerokości, został wyświetlony i domyślnie zajął całą szerokość rodzica.

box-3
Element ten nie został wypełniony tekstem, ale określiliśmy mu zarówno szerokość jak i wysokość i został wyświetlony zajmując zadeklarowany obszar.