Padding și proprietăți în marjă și cum să le folosească, css

Astăzi, vom lucra la înțelegerea diferența dintre padding HTML (padding) și marja (spațiu) în CSS. Dar, mai întâi să se ocupe cu sintaxa lor. Există mai multe moduri de a scrie aceste proprietăți: normale și condensate:

Padding și marja de profit în CSS

Forma uzuală a proprietăților considerate ale înregistrării mai ușor de înțeles, deoarece este similar cu toate celelalte intrări de stil:

Pe de altă parte, în CSS prescurtare combină toate aceste caracteristici într-o singură proprietate comună „umplutură“.

La padding și marja există patru valori: de sus, dreapta, jos și la stânga. Notația prescurtată prezentată mai sus sunt date aceleași patru valori fiecare separate printr-un spațiu. Primul dintre cele patru valori ale marginea de sus, apoi înapoi la dreapta, din partea de jos (padding jos HTML) și pe stânga:

Această intrare poate fi scurtat la trei valori de înregistrare, în cazul în care padding / marginea din stânga și dreapta identice. De exemplu, în cazul în adâncitura superioară este 30px. la stânga și la dreapta de 10px. și în partea de jos - 40px. puteți utiliza formularul de mai jos:

Redus la două valori!

În cazul în care superioară și inferioară padding / marja egală, iar padding / marginea din stânga și din dreapta este, de asemenea, la fel, este posibil să se specifice numai cele două valori. În acest exemplu, avem o marginile de sus și de jos, care sunt egale cu 10px. și marginile din stânga și din dreapta - cu 20px. CSS nostru va fi după cum urmează:

Doar o singură valoare!

cea mai recentă versiune a noastră prescurtare pentru umplutură și HTML marja conține doar o singură valoare. Această înregistrare poate fi utilizat atunci când toate marginile (sus, jos, dreapta și stânga) au aceeași valoare. Dacă ne-am dorit, că toate părțile au marje de 20px. CSS ar arata astfel:

Atunci când un format de înregistrare pentru a utiliza? De exemplu, dacă doriți să specificați doar elementul inferior al cavității, voi folosi înregistrarea normală, deoarece este necesar să se aplice o proprietate doar o parte: padding-bottom: 30px;

Cum de a lucra cu și PADDING MARJA

Între aceste două proprietăți există o diferență semnificativă. Padding este folosit pentru a defini spațiul din interiorul HTML-element container. Marja este folosit pentru a defini spațiul din jurul limitelor exterioare ale elementelor.

Imaginați-vă că căptușeala poarta pe haina de iarna tine. Coat o parte din voi, dar dacă am aruncat vopsea în tine, ea ar acoperi o arie mai largă decât în ​​cazul în care nu ați avea această haină.

Vă puteți gândi, de asemenea, de umplutură ca umplutură într-o cutie de carton. Când umple o cutie cu spumă, țineți conținutul lor la o distanță de la marginea cutiei. Padding în CSS este de a face același lucru.

MARJA PADDING și site-ul de exemplu,

Luați în considerare proprietățile cu elemente din exemple. Vom începe cu alineatul (tag-ul

), Apoi adăugați-l culoarea de fundal și se adaugă 30px umplutură pe fiecare parte.

Mai jos pe stânga arată că acest paragraf cu 30px padding în jurul acestuia. În imaginea din dreapta, am folosit instrumentele Google Chrome. pentru a arăta în cazul în care HTML padding începe / se termină pentru elementul respectiv. Culoarea verde din imaginea de mai jos - o umplutură. care este dispus în jurul containerului. Culoarea albastru închis fundal umple zona de interior:

Acum, se adaugă o marjă de paragraf. Voi adăuga o margine de sus și de jos 30px. și 20px la stânga și la dreapta. Mai jos este imaginea din stânga arată modul în care acest lucru sa schimbat cu marja de trecere. Lățimea efectivă a imaginii a devenit mai mică din cauza marjei impinge un alt HTML limitele elementului. Pe dreapta arată că culoarea portocalie - această marjă în jurul elementului. Marja este întotdeauna dincolo de umplutură și un fond albastru inchis, nu se extinde la marja de suprafață:

Dacă sunteți încă confuz modul de utilizare a padding și marja HTML. atunci este timpul pentru a experimenta! Cu cât utilizați mai proprietăți CSS. și modificați valoarea, o mai bună înțelegere a modului în care acestea funcționează.

Traducerea articolului „VS. CSS PADDING Afundare și cum să le folosească „, a fost pregătit de către echipa de proiect prietenos Web design de la A la Z.