Containere

Stefanescu Mihai 2 years ago CSS

Toate aceste elemente HTML (div,p, span, nav, section, aside, etc) ar putea fi considerate containere, de unde si titlul, iar in acest articol am sa vorbesc despre ce stiluri css le putem aplica.

Aceste containere nu sunt altceva decat elemente HTML puse in jurul textului sau a altor elemente HTML. Poate avea margin, border si padding.

Mai jos am postat o imagine in care am explicat cat am putut de simplu ce sunt aceste elemente de care am tot vorbit si anume margin, border si padding.

Hai sa va explic ce am scris in imagine:

  • Continut– Acesta este continutul acelui element HTML, fie ca vorbim de text, imagini sau alte elemente HTML.
  • Padding – Acesta este spatiul dintre continut si conturul containerului.
  • Border – Conturul containerului.
  • Margin – Spatiul dintre conturul containerului si alte elemente de pe langa acesta.

Inaltimea si Latimea unui element

 

Atentie: Cand folosim anumite dimensiuni pentru inaltime si latime acestea vor fi dimensiunile continutului, padding-ul si margin-ul se adauga acestora.

Hai sa ii dam o latime de 200 px unui div:

div {
    width: 200px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

Am zis mai sus ca padding-ul si margin-ul se adauga separat, hai sa facem calculul:

Avem continutul de 200px latime si un padding de 10px, deci div-ul final are o latime de 220px.

200px latime + 10px padding in partea dreapta si 10px padding in partea stanga.

 

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
âœĻ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌊ïļ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.