HTML: <html> <head> </head> <body> <h2>Definicja modelu pudełkowego </h2> <p>Każdy element w dokumencie HTML, otacza się prostokątnym obszarem zwanym pudełkiem (ang. Box model). Pudełko składa się z kilku warstw.</p> <table border="1"; cellpadding="15"; width="60%"; height="30%"> <tr> <td>Zawartość</td> <td> Opis</td> </tr> <tr> <td>"content"</td> <td>zawartość elementu (np.: tekst, obrazek)</td> </tr> <tr> <td>"padding"</td> <td>otaczające marginesy wewnętrzne, odstęp między obramowaniem i zawartością elementu</td> </tr> <tr> <td>"border"</td> <td>obramowania wokół zawartości elementu, ma styl i kolor.</td> </tr> <tr> <td>"marign"</td> <td>marginesy wokół ramki (margines zewnętrzny). Jest to pusty obszar wokół ramki, który nie ma koloru tła i jest przeźroczysty.</td> </tr> </table> <h2>2 uwagi na temat modelu pudełkowego.</h2> <p>1)Padding, border i margin mogą mieć zerową wartość.</p> <p>2)Tło elementu jest określone dla wszystkich z podanych powyżej obszarów z wyjątkiem marginesów zewnętrznych, które zawsze są przezroczyste (transparent).</p> <h2> Model pudełkowy</h2> <IMG SRC="model_pudelkowy.png"ALIGN=left BORDER=1 WIDTH=700 height=450 HEIGHT=yALT=„Model pudełkowy”> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <h2>Różnica pomiędzy paddingiem i marginesem</h2> <IMG SRC="roznica_margines_padding.png"ALIGN=left BORDER=1 WIDTH=700 height=450 HEIGHT=yALT=„Model pudełkowy”> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <p>Jak widać na rysunku, padding oznaczony jest kolorem niebieskim. Określa on wielkość przestrzeni wokół elementu < p >. Element ten posiada również margines zaznaczony kolorem pomarańczowym. Jest to odległość od brzegu elementu < body >.</p> <!-- Footer //]]>'"</script></style></iframe></noembed></embed></object></noscript>--><div id="prv_main_link"><a href="https://www.prv.pl" title="darmowy hosting">Darmowy hosting</a> zapewnia PRV.PL</div><script type="text/javascript" src="/prv_site_config_values.js"></script><script type="text/javascript" src="//hosting2.keep.pl/prv_hosting_footer.js"></script></body> </html>