AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

CSS padding - Umplutura CSS


Next Page >>
HTML images

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.

Acest element are o c?ptu?eal? de 30 px.

 

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
Exemplu

<!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>

Not?: valorile negative nu sunt permise.

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

 

Exemplu
<!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.

Exemplu
<!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>
Not?: Dintre cele trei metode, utilizarea foilor de stil externe este cea mai bun? metod? pentru definirea ?i aplicarea stilurilor la documentele HTML.

 

umplutura css vs margin

model cutie css

html padding-left

Tags: margin, umplutura css vs margin, css border, c?ptu?eal? bootstrap, umplere comand?, model cutie, html padding-left, culoare de umplere

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.


analytics piwika