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