Autor publikacji: Virtual Patriot - Administrator

formuła czterech wartości

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Wrzesień 07 2020

Wyjaśnienie

Wartości niektórych właściwości CSS możemy podać według zasady formuły czterech wartości.

Gdy podamy tylko jedną wartość stanie się ona wartością wszystkich czterech kolejnych wartości danej właściwości CSS.

<!-- OBA ZAPISY SĄ SOBIE RÓWNOZNACZNE -->
margin:50px;
margin:50px 50px 50px 50px;

Gdy podamy dwie wartości pierwsza z nich stanie się również trzecią wartością danej właściwości CSS, a druga z nich stanie się również czwartą wartością danej właściwości CSS.

<!-- OBA ZAPISY SĄ SOBIE RÓWNOZNACZNE -->
margin:50px 25px;
margin:50px 25px 50px 25px;

Gdy podamy trzy wartości druga z nich stanie się również czwartą wartością danej właściwości CSS.

<!-- OBA ZAPISY SĄ SOBIE RÓWNOZNACZNE -->
margin:50px 25px 10px;
margin:50px 25px 10px 25px;

Przykład

  padding:50px;

rozmiar górnego, prawego, dolnego oraz lewego marginesu wewnętrznego tego elementu "div" wynosi 50 pikseli, ponieważ do tego elementu "div" została dodana właściwość "padding" wraz z wartością "50px"

Kod źródłowy przykładu

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

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:50px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar górnego, prawego, dolnego oraz lewego marginesu wewnętrznego tego elementu "div" wynosi 50 pikseli, ponieważ do tego elementu "div" została dodana właściwość "padding" wraz z wartością "50px"
    </div>

  </body>
</html>

Interpretacja

: tak
: tak
: tak
: tak
: tak
: tak