CSS padding - Umplutura CSS
CSS Tutorial » CSS padding - Umplutura CSS
Definiție CSS padding
Fiecare element care poate fi afișat pe o pagină web este alcătuit din una sau mai multe casete dreptunghiulare.
Proprietățile de umplere CSS vă permit să setați spațiul dintre conținutul unui element și marginea acestuia (sau marginea casetei elementului, dacă nu are un chenar definit).
Căptușeala este afectată de culoarea de fundal a elementului. De exemplu, dacă setați culoarea de fundal a unui element, acesta va fi vizibil prin zona de umplere.
Definiți căptușeala pentru fiecare parte
Puteți specifica umplutura CSS pentru fiecare parte a unui element, cum ar fi partea de sus, dreapta, partea de jos și partea stângă, utilizând proprietățile:
- padding-top,
- padding-right,
- padding-bottom
- padding-left
Proprietățile de umplere pot fi specificate folosind următoarele valori:
- length - specifică o completare în px, pt, cm, etc.
- % - specifică o umplutură în% din lățimea elementului care conține
- inherit - specifică faptul că umplutura ar trebui să moștenească de la elementul părinte
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 60px;
padding-left: 26px;
}
</style>
</head>
<body><h2>Utilizați proprietăți individuale de umplere</h2>
<div>Acest element div are 40 px umplere superioară, 20 px umplere dreaptă,
o umplere de jos de 60 px și o umplere din stânga de 26 px.</div></body>
</html>
Tags: css padding, css top padding, css text padding, css padding area, css padding and marjen, css padding definition, css text neumplut, css culoare de umplere, css padding
Proprietatea de stenogramă de umplere CSS
Proprietatea de umplutură este o proprietate scurtată pentru a evita setarea umplerii fiecărei părți separat, adică:
- padding-top
- padding-right
- padding-bottom
- padding-left
Ei bine, așa funcționează:
Dacă proprietatea de umplere are patru valori:
Căptușeală - padding: 20px 40px 65px 90px;
padding superioară este de 20 px
padding potrivită este de 40 px
padding de jos este de 65 px
padding din stânga este de 90 px
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>Setați umplerea pentru toate părțile simultan</title>
<style>
h1 {
padding: 40px; /* se aplică pe toate cele patru laturi */
}
p {
padding: 25px 10px; /* de sus în jos cu 25 px de fiecare parte | stânga și dreapta 10px fiecare parte */
}
div {
padding: 20px 30px 10px; /* până 20px | stânga și dreapta 30px fiecare parte | 10px în jos */
}
pre {
padding: 25px 50px 75px 100px; /*top 25px | dreapta 50px | în jos 75px | stânga 100px */
}
h1, p, div, pre {
background-color: #80E6FF;
}
</style>
</head>
<body>
<h1>Este es un titulo. Este es un titulo. Este es un titulo.</h1>
<p>Acesta este un simplu paragraf de text. Acesta este un simplu paragraf de text.
Acesta este un simplu paragraf de text.</p>
<div>Acesta este un articol din cutie DIV. Acesta este un articol din cutia DIV. Acesta este un articol din cutie DIV.
Acesta este un articol din cutie DIV.</div>
<pre>Acesta este un fragment de text pre-formatat.<br />
Acesta este un fragment de text pre-formatat. </pre>
<p><strong>Notă: </strong> jucați cu valoarea proprietății de umplere pentru a vedea cum funcționează.</p>
</body>
</html>
Această notație pe scurt poate lua una, două, trei sau patru valori separate prin spații albe.
Dacă este specificată o valoare, aceasta se aplică tuturor celor patru fețe.
Dacă sunt specificate două valori, prima valoare se aplică în partea de sus și în partea de jos și a doua valoare se aplică în partea stângă și dreapta a casetei de elemente.
Dacă sunt specificate trei valori, prima valoare se aplică în partea de sus, a doua valoare se aplică în partea stângă și în dreapta, iar ultima valoare se aplică în partea de jos.
Dacă sunt specificate patru valori, acestea sunt aplicate în partea de sus, dreapta, jos și stânga a casetei de articole, respectiv, în ordinea specificată.
Efectul umplerii și marginii asupra designului
Când creați aspecte de pagină web, adăugarea unei căptușiri sau a unui chenar la elemente produce uneori rezultate neașteptate, deoarece căptușeala și chenarul sunt adăugate la lățimea și înălțimea casetei generate de element, așa cum ați aflat în capitolul CSS modelul cutiei.
De exemplu, dacă setați lățimea unui element <div> la 100% și aplică, de asemenea, umplutura sau marginea stânga-dreapta, va apărea bara de defilare orizontală.
Pentru a preveni căptușeala și chenarul să schimbe lățimea și înălțimea casetei elementului, puteți utiliza proprietatea CSS size size ( box-sizing ).
În exemplul următor, lățimea și înălțimea elementului <div> ele vor rămâne neschimbate, cu toate acestea aria conținutului lor va scădea odată cu creșterea umpluturii sau a chenarului.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>CSS care previne modificările dimensiunilor casetei de elemente</title>
<style>
div {
width: 100%;
padding: 25px;
box-sizing: border-box;
background: violet;
}
</style>
</head>
<body>
<div>
<h1>Acesta este un titlu în cutie DIV</h1>
</div>
<p><strong>Atenție </strong>, de data aceasta nu există nicio bară de derulare în partea de jos a ferestrei.</p>
</body>
</html>
umplutura css vs margin
model cutie css
html padding-left
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.