Margin CSS - marja
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).
(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
<!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
<!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.
<!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
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.