Stilul HTML Padding (Programare, Html, Css)

user5041486 a intrebat.

Deci, am acest cod html:

<!DOCTYPE html>
<html>
    <body>
        <div style="background-color:black;color:white;padding:20px">
        <h2>London</h2>
    </body> 
</html>

Întrebarea mea este, ce înseamnă padding:20px în atributul de stil pentru div element? Este același lucru cu a face padding:top=20px, , padding:right=20px, , padding:bottom=20px, , padding:left=20px?

Am încercat să pun (padding:top=20px, , padding:right=20px, , padding:bottom=20px, , padding:left=20px) în h2 ca atribut, astfel (eliminat padding:20px din atributul style din elementul div element):

<h2 padding_top=20px, padding_right=20px, padding_bottom=20px, padding_left=20px>London</h2>

Dar, dintr-un motiv oarecare, linia de mai sus mi-a dat un rezultat diferit de cel obținut punând atributul padding:20px în atributul de stil al elementului div element. Poate cineva să-mi explice această diferență? Vă mulțumesc anticipat pentru ajutor!

12 răspunsuri
connexo

Sintaxa ta este plină de erori.

Trebuie să fie

<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px">London</h2>

și da, pe scurt este identic cu

<h2 style="padding: 20px">London</h2>

Există și alte trei forme scurte:

padding: 10px 5px;

înseamnă că se aplică 10px sus/jos și 5px stânga/dreapta.

padding: 10px 5px 0;

înseamnă să aplici 10px sus, 0 la bază și 5px stânga/dreapta.

padding: 1px 2px 3px 4px;

înseamnă să aplici 1px sus, 2px dreapta, 3px jos, 4px stânga (în sensul acelor de ceasornic, începând de sus).

Comentarii

  • Acesta a fost un răspuns extrem de util. Înțelegerea celorlalte forme ale atributului padding m-a ajutat foarte mult. Vă mulțumesc foarte mult pentru că le-ați explicat și pe acestea! De asemenea, o întrebare rapidă… Este style un atribut al elementului html h2 sau este doar un atribut CSS? – user5041486
  • Este un așa-numit atribut universal, ceea ce înseamnă, în principiu, că este disponibil pe toate elementele HTML. Cu toate acestea, se consideră în general că este o practică proastă utilizarea lui, cu excepția unor cazuri foarte speciale în care proprietățile css (cum ar fi, de exemplu, background-image) trebuie să fie setate dinamic. Modul obișnuit de a face acest lucru este de a vă pune stilurile într-o clasă css în foaia de stil css și apoi de a o aplica elementelor prin intermediul (din nou) universalului class universal. –  > Por connexo.
  • Bine! Asta are sens acum. Mulțumesc foarte mult pentru ajutor! – user5041486
  • @connext: Nu este nevoie de punct și virgulă după ‘padding-left: 20px ? –  > Por aerijman.
Dmitriy

nu este valabil

<h2 padding_top=20px, padding_right=20px, padding_bottom=20px, padding_left=20px>London</h2>

utilizați

Fiddle

Comentarii

  • Mulțumesc foarte mult pentru ajutor Dmitriy! Acum înțeleg greșeala mea! – user5041486
Wes Foster

Da, padding:20px; aplică aceeași cantitate de umplutură pe toate laturile elementului tău.

De asemenea, HTML-ul dvs. este incorect. Faceți acest lucru:

<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

Sau pur și simplu,

<h2 style="padding:20px">London</h2>

pcs

dumneavoastră, h2 stilul padding este incorect.

ar trebui să adăugați style pentru elementul h2.

<h2 style="padding:20px">London</h2>

Mike — Nu mai este aici

Dacă vrei să aplici padding pe toate laturile simultan, e mai bine să folosești doar padding:20px ca valoare pentru stil, deoarece reduce dimensiunea codului.

Consultați acest link pentru mai multe exemple de utilizare a padding-ului CSS:

http://www.w3schools.com/css/css_padding.asp

Raghavendra

încercați acest lucru. veți ști cum funcționează padding-ul. padding-ul este pentru poziționarea textului/elementului într-un element(părinte)

Vivek Tankaria

Padding:20px va aplica padding în toate cele 4 direcții.

De asemenea, puteți scrie în acest fel padding:20px 20px 20px 20px; acest lucru se întâmplă în felul următor padding : top right bottom left

Deci, în loc să scrieți padding-right, padding-top și celelalte două, puteți scrie pur și simplu padding și aplicați-i valoarea de padding dreapta stânga sus jos. Această metodă este utilă atunci când dorim să aplicăm valori de padding diferite pentru toate direcțiile. Cum ar fi padding: 5px 10px; Aceasta va aplica o umplutură de 5px în partea de sus și de jos și 10px din stânga-dreapta;

De asemenea, HTML-ul dvs. este incorect. Faceți acest lucru:

<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>

OR

<h2 style="padding:20px 20px 20px 20px;">London</h2>

Sau pur și simplu,

<h2 style="padding:20px;">London</h2>

shhrzl

Sintaxa dvs. css este incorectă

Sintaxa corectă este:

<h2 style="padding-top=20px; padding-right=20px; padding-bottom=20px; padding-left=20px;">London</h2>

OR

<h2 style="padding=20px;">London</h2>

OR

<h2 style="padding=20px 20px 20px 20px;">London</h2>

Nandhini
h2{ padding:20px;}`<h2 style="padding:20px">London</h2>`

Chandresh

Sintaxa ta este total greșită.Ar trebui să fie

    <h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; 
padding-left: 20px">London</h2>

De asemenea, dacă doriți să dați umplutură la toate laturile puteți folosi ca mai jos:

<h2 style="padding: 20px;">London</h2>

Sau puteți scrie și așa padding:10px 20px 30px 40px; înseamnă padding-top:10px,padding-right:20px,padding-bottom:30px,padding-left:40px,

Padding: 10px 20px înseamnă padding-top:10px,padding-bottom:10px,padding-left:20px,padding-right:20px

Padding: 10px 30px 20px înseamnă padding-top:10px,padding-bottom:20px,padding-left:30px,padding-right:30px

Comentarii

  • Mulțumesc foarte mult pentru ajutor Chandresh! Acum am înțeles greșeala mea! – user5041486
  • Mulțumesc pentru editare Saina! M-a ajutat foarte mult să cunosc diferitele forme. – user5041486
Rohit Karhana Gujjar

Vernan Jay Domingo

padding:20px înseamnă că dai 20px padding de sus, dreapta jos, stânga. Vrei să spui padding-top, padding-right…. mai degrabă decât padding:right, padding:top etc… pentru că acesta nu funcționează pe al meu.

Tags:,