AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

Margin CSS - marja


Next Page >>
HTML images

CSS Tutorial » Margin CSS - marja

Marja CSS - definitie

Marginile sunt utilizate pentru a crea spa?iu în jurul elementelor, în afara grani?elor definite.

Exist? propriet??i pentru a seta marja pentru fiecare parte a unui element (sus, dreapta, jos ?i stânga).

Acest element are o marj? de 25 px.
(spa?iu în jurul cutiei verzi marcate cu galben)

 

Setare CSS margini pentru fiecare parte

Pute?i specifica marginile pentru fiecare parte a unui element, precum partea de sus, dreapta, partea de jos ?i partea stâng?, folosind CSS

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Toate propriet??ile marginilor pot avea urm?toarele valori:

  • auto: browserul calculeaz? marja
  • length - specific? marginea in: px, pt, cm, etc.
  • % - specific? marginea % l??imea elementului container
  • inherit - specific? faptul c? umplutura trebuie mo?tenit? de la elementul p?rinte
Exemplu

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #FFC;
}
div {
border: 1px solid green;
margin-top: 80px;
margin-bottom: 80px;
margin-right: 20px;
margin-left: 50px;
background-color: lightblue;
}
</style>
</head>
<body>

<div>
<h2>Utiliza?i propriet??i de marj? individuale</h2>
Acest element div are o marj? superioar? de 80 px, o marj? dreapt? de 20 px,
o marj? inferioar? de 80 px ?i o marj? stâng? de 50 px.</div>

</body>
</html>

Etichete: marj? CSS, valori, centrare, defini?ie, nu func?ioneaz?, proprietate, marj? ?i c?ptu?eal? în css, c?ptu?eal? de margine în chenare ?i model de cutie în css

 

Proprietatea stenogram? a marjei

Pentru a scurta codul, este posibil s? specifica?i toate propriet??ile marginilor într-o singur? proprietate.

Proprietatea de marj? este o proprietate de prescurtare pentru urm?toarele propriet??i de marj? individuale:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Dac? proprietatea de marj? are patru valori:
marj?: 20 px 55 px 70 px 90 px; asta înseamn?:
marja de sus este de 20px
marginea dreapt? este de 55 px
marginea inferioar? este de 70 px
marginea din stânga este de 90 px

Dac? proprietatea de marj? are trei valori:

marj?: 20px 55px 70px;

  • marja superioar? este de 20 px
  • marginile stânga ?i dreapta au 55 px
  • marja de jos este de 70 px

Dac? proprietatea marginii are dou? valori:

marj?: 20px 55px;

  • marginile de sus ?i de jos sunt de 20 px
  • marginile stânga ?i dreapta au 55 px

Dac? proprietatea de marj? are o valoare:

  • marj?: 25 px;
    • cele patru margini sunt de 25 px

 

Exemplu

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 20px 50px 70px 90px;
background-color: lightblue;
}
p {
border: 1px solid black;
margin: 20px 50px 70px;
background-color: lightblue;
}
pre {
border: 1px solid black;
margin: 20px 40px;
background-color: lightblue;
}
h1 {
border: 1px solid black;
margin: 60px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Proprietatea de scurtare a marjei: 4 valori</h2>
<div>Acest element div are o marj? superioar? de 20 px, o marj? dreapt? de 50 px,
o marj? de jos de 70 px ?i o marj? de stânga de 90 px.</div>

<hr>
<h2>Proprietatea de scurtare a marjei: 3 valori</h2>
<p>Acest element p are o marj? de sus de 20 px, o margine de 50 px la stânga ?i la dreapta ?i o marj? de jos de 70 px.</p>

<hr>
<h2>Proprietate stenogram? marj? - 2 valori</h2>
<pre>Acest element pre are o marj? superioar? ?i inferioar? de 20 px ?i o margine dreapt? ?i stâng? de 40 px.</pre>

<hr>
<h2>Proprietate de stenogram? a marjei - 1 valoare</h2>

<h1>Este elemento h1 tiene un margen superior, inferior, izquierdo y derecho de 60px.</h1>
</body>
</html>

 

Centrare orizontal? cu margini automate

Valoarea automat? (automat?) a propriet??ii marginii îi spune browserului web s? calculeze automat marja.
Acesta este utilizat în mod obi?nuit pentru a centra un articol orizontal într-un container mai mare.

Exemplu
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>Centrarea unui element cu marj? automat? CSS</title>
<style>
.caja {
width: 350px;
height: 210px;
margin: 0 auto;
background-color: #D6D6D6;
}
</style>
</head>
<body>
<div class="caja">
<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf de text.</p>
</div>
</body>
</html>

 

centrare marj? CSS

marja - margin nu functioneaza

marja si captuseala - margini vs padding

Tags: marj? CSS, valori, centrare, defini?ie, nu func?ioneaz?, proprietate, marj? ?i c?ptu?eal? în css, c?ptu?eal? de margine în chenare ?i model de cutie în css

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


analytics piwika