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.

przykładowy element - div

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:

przykładowy element - div

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:

przykładowy element - div

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:

przykładowy element - div

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:

pierwszy wiersz elementu - div
drugi wiersz elementu - div
trzeci wiersz elementu - div

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.

pierwszy element - div
drugi element - div
trzeci element - div

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:

<!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.