Live
x
<html> <head> <title>Box model</title> </head> <style> span, div { border: 2px solid red; font-size: 1.5em; margin: 10px 0; padding: 20px; } span { display: inline-block; /* Ustawiamy szerokość na 300px, jednak w rzeczywistości szerokość wynosi 300px + 40px (lewy + prawy padding) + 4px (lewy + prawy border) a więc w sume 344 px, zamiast oczekiwanych przez nas 300px! */ width: 300px; /* Podobnie z wysokością: 100px + 40px + 4px = 144px zamiast 100px */ height: 100px; } </style> <body> <section> <span>Element liniowo-blokowy</span> </section> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.