Paano ako makalikha ng padding sa CSS?

Pinapayagan ng CSS Padding ang isang HTML coder na itakda ang default na padding o patay na puwang sa labas ng isang elemento ng HTML.Ang pakinabang ng paggawa nito ay nai -save nito ang coder mula sa pag -uulit na ang padding code para sa bawat halimbawa ng elementong iyon, at mas madaling lumilikha ng pagkakapare -pareho sa pahina.Ang elemento ng HTML na mai -padded ay maaaring maging anumang bilang ng mga bagay, tulad ng isang talata, isang talahanayan, o isang heading.

Upang lumikha ng padding sa CSS, kailangan mo munang kilalanin ang elemento ng HTML na nais mong mag -pad.Ang elementong ito na nais mong pad ay kilala bilang tagapili.Pagkatapos, nais mong tukuyin ang naaangkop na mga halaga ng padding.Mayroong limang magkakaibang uri ng mga katangian ng padding sa CSS MDASH;Isa para sa lahat ng apat na panig ng isang elemento nang sabay -sabay, at apat na iba pa para sa bawat indibidwal na bahagi ng elemento (hal., Ang kaliwang bahagi, kanang bahagi, sa tuktok na bahagi o sa ilalim na bahagi).Ang isang pag -aari na nagpapahintulot sa programmer upang tukuyin ang mga halaga para sa lahat ng apat na panig ng isang elemento ng HTML nang sabay -sabay na tinatawag na isang

shorthand na pag -aari .

Ang wikang coding na ginamit upang tukuyin ang isang deklarasyon ng CSS padding ay ang salitang "padding."Kasunod ng label na iyon, ang mga nauugnay na halaga ng padding, o, impormasyon sa dami ng nais na puwang, karaniwang kinakatawan ng alinman sa mga pixel o isang porsyento.Ang padding at ang mga halaga ay nakasulat sa loob ng mga kulot na braces o mga kulot na bracket (i.e., {at}).Bago ang lahat ng ito ay ang elemento ng HTML na mai -padded (hal., P para sa talata o H2 para sa mga header ng Antas 2)., puntos (hal., 1pt o 5pt) o pulgada (hal., 1in o 5in), o sentimetro (e.g., 1cm o 5cm).Ang mga halaga ay maaari ring ideklara bilang isang porsyento ng elemento ng HTML na naka -istilong.Kung ang halaga ay 50%, halimbawa, ang padding ay katumbas ng kalahati ng laki ng elemento.Kung isang halaga lamang ang itinalaga, pagkatapos ay itatalaga ng mga web browser ang padding na ito sa lahat ng apat na panig ng elemento ng HTML.

Padding: 10%;

Padding: 100px;

Ang pagdaragdag ng higit pang mga halaga sa uri ng deklarasyon ng padding sa itaas ay magiging sanhi ng pagbibigay kahulugan sa kanila ng mga web browser.Kung ang dalawang halaga ay itinalaga, ang una ay tumutugma sa tuktok at ibaba, habang ang pangalawa ay tumutugma sa kaliwa at kanan.Tatlong mga halaga ang magiging sanhi ng una upang sumangguni sa tuktok, ang pangalawa sa kaliwa at kanang panig, at ang pangatlo sa ilalim ng elemento ng HTML.Ang pagtatalaga ng maximum ng apat na mga halaga ay nagiging sanhi ng una, pangalawa, pangatlo, at ika -apat na mga halaga na tumutugma sa tuktok, kanan, ibaba, at kaliwa ng elemento ng HTML, sa pagkakasunud -sunod na iyon.Kung higit sa isang halaga ang ibinigay, dapat silang paghiwalayin ng mga puwang at natapos sa isang semi-colon, halimbawa:

Padding: 10px 20px 10px 20px;

Ang padding sa CSS ay maaaring gawin nang isang panig din.Kaugnay nito, mayroong apat na higit pang mga katangian ng padding na magagamit.Ito ang mga padding-top, padding-right, padding-bottom, at padding-left.Upang lumikha ng padding sa CSS sa mas tumpak na paraan na ito, kailangan mong lagyan ng label ang mga katangian na may parehong syntax bilang mga pagpapahayag ng shorthand tulad ng nasa itaas.Ang bawat isa sa mga katangian ng padding na ito ay tumatagal lamang ng isang halaga sa alinman sa haba o porsyento.Halimbawa:

Padding-Top: 10px;

Padding-Right: 20px;

Padding-Bottom: 10px;

Padding-Left: 20px;

Ang sumusunod na code ay lumilikha ng isang webpage, ay nagpapahayag ng mga katangian ng padding sa pagitan ng mga tag ng estilo, atPagkatapos ay ginagamit ang mga ito sa isang elemento ng talata na tinukoy ng P tag.Ang teksto sa pagitan ng/ * at ang */ay mga tala upang ipaliwanag ang uri ng padding na ginagamit at hindi isasama sa CSS padding code.
p.example1 {padding: 10px;} /* short-hand padding para sa lahat ng apat na panig* /
p.example2 {padding: 50px 30px;} /* short-hand padding para sa tuktok at ibaba na sinusundan ng kaliwaat tama * /
p.example3 {
padding-top: 10px;
padding-bottom: 20px;
padding-bottom: 10px;
padding-left: 20px;
} / * indibidwal na padding.*/
lt;/style gt;
lt;/head gt;

lt; katawan gt;
lt; p class ' halimbawa1 gt; Ang tekstong ito ay may parehong padding sa bawat panig.Ang padding sa bawat panig ay 10px. Lt;/p gt;
lt; p class ' halimbawa2 gt; Ang tekstong ito ay may tuktok at ilalim na padding ng 50px at isang kaliwa at kanang padding ng 30px. Lt;/p gt;
lt; p klase' "Halimbawa3" gt; Ang tekstong ito ay may nangungunang padding ng 10px, isang kanang padding ng 20px, isang ilalim na padding ng 10px, at isang kaliwang padding ng 20px.;

Sa halimbawa sa itaas, "Halimbawa1," atbp, ay mga pangalan na itinalaga sa isang klase, na kung saan ay pagkatapos ay isinangguni sa mga talata.Ang panahon sa pagitan ng P tag at ang mga pangalan ng klase sa simula ng code ay nagpapahiwatig ng isang pagpapahayag ng isang klase na itinalaga sa isang talata.Pansinin ang mga tirante pagkatapos ng deklarasyon ng klase na nakapaloob sa mga takdang halaga ng pag -aari ng padding.

Kahit na ito ay tila tulad ng maraming trabaho, ito ay hindi gaanong masinsinang paggawa kaysa sa pagtukoy ng padding para sa bawat indibidwal na talata.Maaari mong ideklara ang isang pag -aari ng padding para sa nais na elemento, na sa halimbawa sa itaas ay ang P tag, at pagkatapos ay sumangguni sa klase kapag ginamit mo ang elemento sa pagitan ng mga tag ng katawan ng pahina.Kung isang uri lamang ng padding ang kinakailangan para sa lahat ng mga talata, hindi mo na kailangang gumamit ng mga klase.Gamitin lamang ang sumusunod na code sa pagitan ng mga tag ng estilo, at pagkatapos ay i -code ang mga talata nang hindi tinukoy ang anumang klase.Ang code na ito ay pupunta sa pagitan ng mga tag ng katawan sa halip na ang code sa halimbawa sa itaas.