# 12. Właściwości CSS zmieniające rozmiar elementu HTML

W tej części kursu CSS poznamy właściwości CSS, które zmieniają rozmiar elementu HTML (jego szerokość oraz wysokość).

Często podczas tworzenia różnych części naszej strony internetowej musimy określić konkretną szerokość elementu HTML bądź jego wysokość.\
\
Do określenia konkretnej szerokości elementu HTML służy właściwość `width`, a do określenia konkretnej wysokości elementu HTML służy właściwość `height`.\
\
Pod spodem został zaprezentowany element `div`, do którego została dodana właściwość `width` wraz z wartością `300px`.

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2F5R2XGAmZBG9qYxapPbMj%2Fimage.png?alt=media&#x26;token=6d8782e0-bb54-480f-8ea7-661b72b032ef" alt=""><figcaption></figcaption></figure>

Szerokość naszego przykładowego elementu `div` jest równa 300 pikseli, ponieważ do wspomnianego elementu `div` została dodana właściwość `width` wraz z wartością `300px`.\
\
W momencie gdy do naszego przykładowego elementu `div` dodamy właściwość `border`, która odpowiada za szerokość, styl oraz kolor obramowania elementu HTML, to rozmiary naszego elementu HTML powiększą się.\
\
Ta sytuacja została zaprezentowana pod spodem:

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FNOJvz4OEjsSOBJAfoeGo%2Fimage.png?alt=media&#x26;token=92a17206-724e-4450-a5e9-b5eaa350eb43" alt=""><figcaption></figcaption></figure>

Całkowita szerokość oraz całkowita wysokość naszego elementu HTML powiększyła się w sumie o 20 pikseli, ponieważ do wspomnianego elementu została dodana właściwość `border` wraz z wartością `10px solid #000`, co oznacza, że po każdej stronie elementu HTML zostało dodane obramowanie o szerokości 10 pikseli.\
\
W momencie gdy do naszego przykładowego elementu `div` dodamy właściwość `padding`, która odpowiada za wartości marginesów wewnętrznych elementu HTML, to rozmiary naszego elementu HTML powiększą się.\
\
Ta sytuacja została zaprezentowana poniżej:

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FvhbZ3Ds3Pgsw2YDGgahs%2Fimage.png?alt=media&#x26;token=713bd4a7-14ab-46fc-983a-41c474082037" alt=""><figcaption></figcaption></figure>

Całkowita szerokość oraz całkowita wysokość naszego elementu HTML powiększyła się o kolejne 30 pikseli, ponieważ do wspomnianego elementu została dodana właściwość `padding` wraz z wartością `15px`, co oznacza, że po każdej stronie w elemencie HTML został utworzony margines wewnętrzny o wartości 15 pikseli.\
\
W momencie gdy do naszego przykładowego elementu `div` dodamy właściwość `margin`, która odpowiada za wartości marginesów zewnętrznych elementu HTML, to rozmiary naszego elementu HTML powiększą się.\
\
Ta sytuacja została zaprezentowana pod spodem:

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FNrxaAAC7zk8kNuGga5T3%2Fimage.png?alt=media&#x26;token=84e09cb9-b1d5-441d-a473-8fc6a397656b" alt=""><figcaption></figcaption></figure>

Całkowita szerokość oraz całkowita wysokość naszego elementu HTML powiększyła się o kolejne 40 pikseli, ponieważ do wspomnianego elementu została dodana właściwość `margin` wraz z wartością `20px`, co oznacza, że po każdej stronie elementu HTML został utworzony margines zewnętrzny o wartości 20 pikseli.\
\
Podsumowując. Na samym początku rozmiar szerokości naszego elementu HTML wynosił 300 pikseli, jednak ten rozmiar powiększył się za sprawą innych właściwości CSS i ostatecznie wyniósł 390 pikseli.\
\
Dodatkowe 90 pikseli rozmiaru szerokości elementu HTML stanowią:

* lewe obramowanie (10 pikseli)
* lewy margines wewnętrzny (15 pikseli)
* lewy margines zewnętrzny (20 pikseli)
* prawe obramowanie (10 pikseli)
* prawy margines wewnętrzny (15 pikseli)
* prawy margines zewnętrzny (20 pikseli)
* W sumie = 10 + 15 + 20 + 10 + 15 + 20 = 90

Jak dotąd, dodatkowe 90 pikseli rozmiaru wysokości elementu stanowią:

* górne obramowanie (10 pikseli)
* górny margines wewnętrzny (15 pikseli)
* górny margines zewnętrzny (20 pikseli)
* dolne obramowanie (10 pikseli)
* dolny margines wewnętrzny (15 pikseli)
* dolny margines zewnętrzny (20 pikseli)
* W sumie = 10 + 15 + 20 + 10 + 15 + 20 = 90

Jeżeli chodzi o wysokość elementu HTML, to w przypadku gdy nie określimy właściwości `height`, która odpowiada za wartość wysokości elementu HTML, to początkowa wysokość elementu HTML będzie uzależniona od zawartości jaka znajdzie się w tym elemencie. Tą zawartością elementu może być tekst. Tekst jest wyświetlany za pomocą czcionki, która ma swój rozmiar. Jeżeli w elemencie znajdzie się kilka linijek tekstu to każda taka linijka będzie umieszczona w osobnym wierszu. Wysokość takich wierszy możemy określać za pomocą właściwości `line-height`, co będzie miało wpływ na powiększenie rozmiaru wysokości całego elementu HTML.\
\
Sytuacja, która została opisana w poprzednim akapicie, została zaprezentowana poniżej:

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FQ8TIjK0hfMKmyjGaf9ph%2Fimage.png?alt=media&#x26;token=4f01013e-f410-4183-9c5f-3a1a1a8cfa76" alt=""><figcaption></figcaption></figure>

Całkowita wysokość naszego elementu HTML powiększyła się o kolejne pikseli, ponieważ do wspomnianego elementu została dodana właściwość `line-height` wraz z wartością `40px`, co oznacza, że wartość wysokości każdego wiersza w elemencie HTML wynosi 40 pikseli. Nasz element ma trzy wiersze tekstu, dlatego całkowita wysokość tych wierszy wynosi 120 pikseli, bo 3 × 40px = 120px.\
\
W tej części kursu CSS zostały zaprezentowane właściwości CSS, które mają wpływ na powiększenie rozmiarów elementu HTML. Tymi właściwościami są: border, padding, margin, line-height.\
\
Jeżeli nie chcemy, aby właściwość `border` oraz `padding` wpływała na powiększenie rozmiaru elementu HTML, to do danego elementu HTML należy dodać właściwość box-sizing wraz z wartością `border-box`.\
\
Pod spodem zostały zaprezentowane trzy elementy HTML.

<figure><img src="https://3876702757-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8htinEZYbP2Js3yNtq9f%2Fuploads%2FC5mcDWvivOq3DLfME8ts%2Fimage.png?alt=media&#x26;token=49222e85-0343-4916-9486-c8859d05245b" alt=""><figcaption></figcaption></figure>

Szerokość pierwszego elementu HTML została ustawiona na 300 pikseli.\
\
Szerokość drugiego elementu HTML została ustawiona na 300 pikseli i nie powiększyła się, mimo że do elementu została dodana właściwość `border` oraz `padding`, ponieważ do elementu HTML została przypisana właściwość `box-sizing` wraz z wartością `border-box`.\
\
Szerokość trzeciego elementu HTML została ustawiona na 300 pikseli i powiększyła się, ponieważ do elementu została dodana właściwość `border` oraz `padding`.\
\
Kod HTML przykładu został umieszczony poniżej:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      div {
        width:300px;
        background-color:lightblue;
        text-align:center;
        margin-bottom:15px;
      }

      #drugi {
        border:10px solid #000;
        padding:15px;

        /* zapis dla wszystkich przeglądarek (w przyszłości) */
        box-sizing:border-box;

        /* zapis dla przeglądarki Firefox */
        -moz-box-sizing:border-box;

        /* zapis dla przeglądarki Safari */
        -webkit-box-sizing:border-box;
      }

      #trzeci {
        border:10px solid #000;
        padding:15px;
      }
    </style>
  </head>

  <body>

    <div>pierwszy element - div</div>
    <div id="drugi">drugi element - div</div>
    <div id="trzeci">trzeci element - div</div>

  </body>
</html>
```

W następnej części kursu CSS dowiemy się, co to jest wartość domyślna właściwości CSS.
