---
title: Bloki
slug: Learn/CSS/Building_blocks
tags:
  - CSS:Na_początek
translation_of: Learn/CSS/Building_blocks
translation_of_original: Web/Guide/CSS/Getting_started/Boxes
original_slug: Web/CSS/Na_początek/Bloki
---
<p> </p>
<p>Ta strona opisuje jak możesz użyć CSS do kontroli przestrzeni, którą zajmuje wyświetlany element.</p>
<p>W swoim przykładowym dokumencie będziesz zmieniać odstępy i dodawać reguły dekoracyjne.</p>
<h3 id="Informacja:_Bloki" name="Informacja:_Bloki">Informacja: Bloki</h3>
<p>Kiedy Twoja przeglądarka wyświetla element, zajmuje on miejsce. Przestrzeń, którą zajmuje element, dzieli się na cztery części.</p>
<p>W środku istnieje przestrzeń, której element potrzebuje do wyświetlenia swojej zawartości. Wokół tego jest margines wewnętrzny. Wokół tego jest ramka. Wokół tego jest margines zewnętrzny.</p>
<table> <tbody> <tr> <td style="width: 22em;"> <div style="padding: 0px 2em 2em; background-color: rgb(238, 238, 238); width: 16em;"> <p style="margin: 0px; text-align: center;">margines zewnętrzny</p> <p style="margin: 0px 0px -0.75em; text-align: center;">ramka</p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(255, 255, 255);"> <p style="text-align: center;">margines wewnętrzny</p> <div style="background-color: rgb(238, 238, 238);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(153, 153, 153);">element</p> </div> </div> </div> <p><em>Jasny szary wskazuje części układu strony.</em></p> </td> <td> <div style="padding: 0px 2em 2em; background-color: rgb(255, 255, 255); width: 16em;"> <p style="margin: 0px; text-align: center;"> </p> <p style="margin: 0px 0px -0.75em; text-align: center;"> </p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(255, 255, 255);"> <p style="text-align: center;"> </p> <div style="background-color: rgb(255, 255, 255);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(153, 153, 153);">element</p> </div> </div> </div> <p><em>Tak wygląda to w przeglądarce.</em></p> </td> </tr> </tbody>
</table>
<p>Marginesy wewnętrzne, zewnętrzne i ramka mogą mieć różne wielkości na górze, na dole, po prawej i po lewej stronie elementu. Każdy z nich może mieć wartość zero.</p>
<p>Margines wewnętrzny ma zawsze ten sam kolor, co tło elementu. Zatem kiedy określasz kolo tła, widzisz ten kolor w tle elementu i jego marginesu wewnętrznego. Margines jest zawsze przezroczysty.</p>
<table> <tbody> <tr> <td style="width: 22em;"> <div style="padding: 0px 2em 2em; background-color: rgb(238, 238, 238); width: 16em;"> <p style="margin: 0px; text-align: center;">margines zewnętrzny</p> <p style="margin: 0px 0px -0.75em; text-align: center;">ramka</p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(238, 255, 238);"> <p style="text-align: center;">margines wewnętrzny</p> <div style="background-color: rgb(221, 238, 221);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(136, 153, 136);">element</p> </div> </div> </div> <p><em>Ten element ma zielone tło.</em></p> </td> <td> <div style="padding: 0px 2em 2em; background-color: rgb(255, 255, 255); width: 16em;"> <p style="margin: 0px; text-align: center;"> </p> <p style="margin: 0px 0px -0.75em; text-align: center;"> </p> <div style="border: 4px solid rgb(255, 221, 153); padding: 0px 2em 2em; background-color: rgb(238, 255, 238);"> <p style="text-align: center;"> </p> <div style="background-color: rgb(238, 255, 238);"> <p style="margin: 0px; padding: 0px; text-align: center; font-size: 200%; font-weight: bold; color: rgb(136, 153, 136);">element</p> </div> </div> </div> <p><em>Tak wygląda to w przeglądarce.</em></p> </td> </tr> </tbody>
</table>
<h4 id="Ramki" name="Ramki">Ramki</h4>
<p>Możesz użyć ramek do dekoracji elementów liniami lub blokami.</p>
<p>Aby utworzyć jednakową ramkę wokół całego elementu, użyj własności <code>border</code>. Określ szerokość (zwykle w pikselach), styl i kolor.</p>
<p>Istnieją następujące style:</p>
<table style="margin-left: 2em;"> <tbody> <tr> <td style="width: 6em;"> <div style="border: 2px solid rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>solid</code></div> </td> <td style="width: 6em;"> <div style="border: 2px dotted rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>dotted</code></div> </td> <td style="width: 6em;"> <div style="border: 2px dashed rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>dashed</code></div> </td> <td style="width: 6em;"> <div style="border: 4px double rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>double</code></div> </td> </tr> <tr> <td style="width: 6em;"> <div style="border: 2px inset rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>inset</code></div> </td> <td style="width: 6em;"> <div style="border: 2px outset rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>outset</code></div> </td> <td style="width: 6em;"> <div style="border: 4px ridge rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>ridge</code></div> </td> <td style="width: 6em;"> <div style="border: 4px groove rgb(68, 170, 68); margin: 0.5em; padding: 0.5em; width: 5em; text-align: center;"><code>groove</code></div> </td> </tr> </tbody>
</table>
<p>Możesz także ustawić styl na <code>none</code> lub <code>hidden</code>, aby usunąć ramkę, lub ustawić kolor na <code>transparent</code>, aby ustawić przezroczystą ramkę bez dotykania układu.</p>
<p>Aby określić osobno każdą krawędź ramki, użyj własności: <code>border-top</code> (góra), <code>border-right</code> (prawo), <code>border-bottom</code> (dół), <code>border-left</code> (lewo). Możesz ich użyć do określenia ramki tylko po jednej stronie lub różnych ramek dla każdej krawędzi.</p>
<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Przykłady </caption> <tbody> <tr> <td>Ta reguła ustawia kolor tła i górną ramkę dla elementów nagłówka: <div style="width: 40em;"> <p>h3 {</p> <pre class="eval"> border-top: 4px solid #7c7; /* mid green */
 background-color: #efe;     /* pale green */
 color: #050;                /* dark green */
 }
</pre> </div> <p>Wygląda to tak:</p> <table> <tbody> <tr> <td> <p style="border-top: 4px solid rgb(119, 204, 119); font-size: 133%; font-weight: bold; background-color: rgb(238, 255, 238); color: rgb(0, 85, 0); padding-right: 6em;">Nagłówek w dobrym stylu</p> </td> </tr> </tbody> </table> <p>Dzięki tej regule obrazki są lepiej widoczne dzięki lekko szarej ramce wokół każdego z nich:</p> <div style="width: 30em;"> <p>img {border: 2px solid #ccc;}</p> </div> <p>Rezultat jest następujący:</p> <table> <tbody> <tr> <td>Obrazek:</td> <td style="border: 2px solid rgb(204, 204, 204);"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/2212/=Blue-rule.png"></td> </tr> </tbody> </table> </td> </tr> </tbody>
</table>
<h4 id="Marginesy_zewn.C4.99trzne_i_wewn.C4.99trzne" name="Marginesy_zewn.C4.99trzne_i_wewn.C4.99trzne">Marginesy zewnętrzne i wewnętrzne</h4>
<p>Użyj marginesów zewnętrznych i wewnętrznych, aby dopasować pozycję elementów i stworzyć przestrzeń wokół nich.</p>
<p>Użyj własności <code>margin</code> lub <code>padding</code>, aby ustawić szerokość marginesu wewnętrznego lub zewnętrznego.</p>
<p>Jeżeli podasz tylko jedną wartość, zostanie ona zastosowana wokół całego elementu (góra, prawo, dół i lewo).</p>
<p>Jeżeli określisz dwie wartości, pierwsza zostanie używa do określenia wymiarów góry i dołu, druga do prawa i lewa.</p>
<p>Możesz też określić wszystkie cztery szerokości w kolejności: góra, prawo, dół, lewo.</p>
<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Przykład </caption> <tbody> <tr> <td>Ta reguła oznacza akapity z klasą <code>remark</code> poprzez dodanie czerwonej ramki wokół nich. <p>Marginesy wewnętrzne ustawione dla wszystkie boków odsuną trochę ramki od tekstu.</p> <p>Lewy margines zewnętrzny odsuwa akapit od reszty tekstu:</p> <div style="width: 30em;"> <p>p.remark {</p> <pre class="eval"> border: 2px solid red;
 padding: 4px;
 margin-left: 24px;
 }
</pre> </div> <p>Wynik wygląda tak:</p> <table> <tbody> <tr> <td> <p>Oto zwykły akapit.</p> <p style="border: 2px solid red; margin: 0px 0px 0px 24px; padding: 4px 6em 4px 4px;">A to akapit z klasą <code>remark</code>.</p> </td> </tr> </tbody> </table> </td> </tr> </tbody>
</table>
<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(244, 244, 244); margin-bottom: 1em;"> <caption>Więcej szczegółów </caption> <tbody> <tr> <td>Kiedy używasz marginesów zewnętrznych i wewnętrznych do określania, jak układane są elementu, Twoje reguły stylu wpływają na domyślne wartości przeglądarki w sposób, który może być bardzo skomplikowany. <p>Różne przeglądarki układają elementy na różne sposoby. Wynik może wyglądać podobnie, póki Twój arkusz stylów nic nie zmienia. Czasem może to dać dość zaskakujące rezultaty.</p> <p>Aby uzyskać spodziewany rezultat, możesz chcieć zmienić znaczniki dokumentu. Następna strona tego kursu tłumaczy, jak to zrobić.</p> <p>Aby dowiedzieć się więcej o marginesach i ramkach, zajrzyj do specyfikacji CSS do rozdziału <a class="external" href="http://www.w3.org/TR/CSS21/box.html">model blokowy</a>.</p> </td> </tr> </tbody>
</table>
<h3 id="Zadanie:_Dodawanie_ramek" name="Zadanie:_Dodawanie_ramek">Zadanie: Dodawanie ramek</h3>
<p>Wyedytuj swój plik CSS. Dodaj poniższą regułę, aby rysować linię nad każdym nagłówkiem:</p>
<div style="width: 30em;">
<p>h3 {border-top: 1px solid gray;}</p>
</div>
<p>Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony, zmodyfikuj stworzoną regułę; w przeciwnym wypadku dodaj nową regułę, która doda przestrzeń pod każdym elementem listy:</p>
<div style="width: 30em;">
<p>li {</p>
<pre class="eval"> list-style: lower-roman;
 margin-bottom: 8px;
 }
</pre>
</div>
<p>Odśwież okno przeglądarki, aby zobaczyć wynik:</p>
<table style="border: 2px outset rgb(51, 102, 187); padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="border-top: 1px solid gray; font-weight: bold; font-size: 133%; margin-bottom: 0.3em; padding-top: 0.4em; padding-bottom: 0.16em;">(A) Oceany</p> <ul style="list-style-type: disc;"> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Arktyczny</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Atlantycki</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Spokojny</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Indyjski</li> <li style="list-style-type: lower-roman; margin-bottom: 8px;">Południowy</li> </ul> <p style="border-top: 1px solid gray; padding: 0.4em 4em 0.16em 0pt; font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: 0.3em;">(B) Numbered paragraphs</p> <p><strong>1: </strong>Lorem ipsum</p> <p><strong>2: </strong>Dolor sit</p> <p><strong>3: </strong>Amet consectetuer</p> <p><strong>4: </strong>Magna aliquam</p> <p><strong>5: </strong>Autem veleum</p> </td> </tr> </tbody>
</table>
<p> </p>
<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 1em;"> <caption>Wyzwanie </caption> <tbody> <tr> <td>Dodaj regułę do swojego arkusza stylów, która stworzy szeroką ramkę wokół wszystkich oceanów w kolorze, który kojarzy Ci się z morzem — coś w stylu: <table style="border: 2px outset rgb(51, 102, 187); padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="border-top: 1px solid gray; font-weight: bold; font-size: 133%; margin-bottom: 0.3em; padding-top: 0.4em; padding-bottom: 0.16em;">(A) The oceans</p> <div style="border: 12px solid rgb(102, 153, 187); padding-left: 1em;"> <ul style="list-style-type: lower-roman;"> <li style="margin-bottom: 8px;">Arctic</li> <li style="margin-bottom: 8px;">Atlantic</li> <li style="margin-bottom: 8px;">Pacific</li> <li style="margin-bottom: 8px;">Indian</li> <li style="margin-bottom: 8px;">Southern</li> </ul> </div> <p style="border-top: 1px solid gray; padding: 0.4em 4em 0.16em 0pt; font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: 0.3em;">(B) Numbered paragraphs</p> <p><strong>. . .</strong></p> </td> </tr> </tbody> </table> <p>(Nie musisz uzyskać identycznej szerokości ani koloru jak tutaj.)</p> </td> </tr> </tbody>
</table>
<h4 id="Co_dalej.3F" name="Co_dalej.3F">Co dalej?</h4>
<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a href="/Talk:pl/CSS/Na_pocz%C4%85tek/Bloki" title="Talk:pl/CSS/Na_początek/Bloki">Dyskusji</a>.</p>
<p>Poprzez określenie marginesów modyfikujesz układ dokumentu. Na następnej stronie nauczysz się zmieniać układ w inny sposób: <strong><a href="/pl/CSS/Na_pocz%C4%85tek/Uk%C5%82ad" title="pl/CSS/Na_początek/Układ">Układ</a></strong></p>
<p>{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "fr": "fr/CSS/Premiers_pas/Bo\u00eetes", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}</p>