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.