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.