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