Inne działy

 

 

Ustawianie marginesów za pomocą CSS

 

Właściwość margin (margines) definiuje przestrzeń wokół elementu HTML. Jest możliwość użycia wartości ujemnych do nakładania treści.

Istnieją następujące cztery właściwości, aby umieścić margines elementu.

  • Skrócona własność margin dla ustawienia właściwości marginesów w jednej deklaracji.
  • margin-bottom określa margines dolny elementu.
  • margin-top określa górny margines elementu.
  • margin-left określa margines po lewej stronie elementu.
  • margin-right określa prawy margines elementu.

Teraz zobaczymy jak wykorzystać te właściwości za pomocą przykładów.

Właściwość margin:

Właściwość margin pozwala na użycie wszystkich właściwości dla czterech marginesów ustawione w jednej deklaracji. Oto składnia jak ustawić margines akapitu: 

<style type="text/css">
p {margin: 15px}
wszystkie cztery marginesy będą miały 15px

p {margin: 10px 2%}
górny i dolny margines będzie miał 10px, lewy i prawy margines będzie
wynosić 2% łącznej szerokości dokumentu. p {margin: 10px 2% -10px} margines górny będzie miał 10px, lewy i prawy margines będzie
wynosić 2% łącznej szerokości dokumentu, dolny margines - 10px p {margin: 10px 2% -10px auto} margines górny będzie miał 10px, prawy margines będzie
miał 2% łącznej szerokości dokumentu, dolny margines - 10px,
lewy margines zostanie ustawiony przez przeglądarkę </style>

 Oto przykład:

<p style="margin: 15px; border:1px solid black;">
wszystkie cztery marginesy będą miały 15px 
</p>

<p style="margin:10px 2%; border:1px solid black;">
górny i dolny margines będzie 10px, lewy i prawy margines będzie
wynosić 2% łącznej szerokości dokumentu. </p> <p style="margin: 10px 2% -10px; border:1px solid black;"> margines górny
będzie wynosił 10px, lewy i prawy margines będzie
wynosić 2% łącznej szerokości dokumentu, dolny margines - 10px </p> <p style="margin: 10px 2% -10px auto; border:1px solid black;">margines górny
będzie miał 10px, prawy margines będzie
miał 2% łącznej szerokości dokumentu, dolny margines - 10px,
lewy margines zostanie ustawiony rzez przeglądarkę </p>

 Poniżej wynik działania kodu:

wszystkie cztery marginesy będą miały 15px

górny i dolny margines będzie 10px, lewy i prawy margines będzie wynosić 2% łącznej szerokości dokumentu.

margines górny będzie wynosił 10px, lewy i prawy margines będzie wynosić 2% łącznej szerokości dokumentu, dolny margines - 10px

margines górny będzie miał 10px, prawy margines będzie miał 2% łącznej szerokości dokumentu, dolny margines - 10px, lewy margines zostanie ustawiony przez przeglądarkę

 

Właściwość margin-bottom

Właściwość margin-bottom pozwala ustawić dolny margines elementu. Może mieć wartość liczbową, % lub auto.

Oto przykład:

<p style="margin-bottom: 15px; border:1px solid black;">
To jest akapit z określonym dolnym marginesem </p>

<p style="margin-bottom: 5%; border:1px solid black;">
To jest kolejny akapit z określonym dolnym marginesem w procentach
</p>

 Poniżej wynik działania kodu:

To jest akapit z określonym dolnym marginesem

To jest kolejny akapit z określonym dolnym marginesem w procentach

 

Właściwość margin-top

Właściwości margin-top pozwala ustawić górny margines elementu. Może mieć wartość liczbową, % lub auto.

Oto przykład:

<p style="margin-top: 15px; border:1px solid black;">
To jest akapit z określonym górnym marginesem</p>

<p style="margin-top: 5%; border:1px solid black;">
To jest kolejny akapit z określonym górnym marginesem w procentach
</p>

 Poniżej wynik działania kodu:

To jest akapit z określonym górnym marginesem

To jest kolejny akapit z określonym górnym marginesem w procentach

 

Właściwość margin-left:

Właściwości margin-left pozwala ustawić lewy margines elementu. Może mieć wartość liczbową, % lub auto.

Oto przykład:

<p style="margin-left: 15px; border:1px solid black;">
To jest akapit z określonym lewym marginesem </p>

<p style="margin-left: 5%; border:1px solid black;">
To jest kolejny akapit z określonym górnym marginesem w procentach
</p>

 Poniżej wynik działania kodu:

To jest akapit z określonym lewym marginesem

To jest kolejny akapit z określonym górnym marginesem w procentach

 

Właściwość margin-right:

Właściwości margin-right pozwala ustawić prawy margines elementu. Może mieć wartość liczbową, % lub auto.

Oto przykład:

<p style="margin-right: 15px; border:1px solid black;">
To jest akapit z określonym prawym marginesem
</p>

<p style="margin-right: 5%; border:1px solid black;">
To jest kolejny akapit z określonym prawym marginesem w procentach </p>

 Poniżej wynik działania kodu:

To jest akapit z określonym prawym marginesem

To jest kolejny akapit z określonym prawym marginesem w procentach

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.