Ostatnio edytowany:

formuła czterech wartości

Autor: Virtual Patriot

Opis

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:#CBFFFF;
      }
    </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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak