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.