Kas yra CSS viršutinė nuosavybė?

Kas Yra Css Virsutine Nuosavybe



„ paraštė-viršus “ ypatybė padeda daugeliui kūrėjų kuriant interaktyvius maketus ir išdėstant HTML elementus. Ypatybės „margin-top“ naudojimas suteikia daugiau galimybių valdyti HTML elementus, papildo vizualinį atskyrimą ir padeda kurti geriau reaguojančius dizainus. Šiame vadove demonstruojama viršutinė maržos savybė, praktiškai įgyvendinama CSS.

Kas yra „maržos viršaus“ nuosavybė?

„ paraštė-viršus “ ypatybė naudojama norint sukurti papildomą tarpą tarp HTML elementų. Jis gali būti nustatytas su teigiamomis ir neigiamomis reikšmėmis. Šios reikšmės nustatomos atsižvelgiant į dizaino poreikius ir padeda išvengti persidengimo bei koreguoti tarpus tarp HTML elementų.





Kaip naudoti „maržos viršaus“ nuosavybę su teigiama verte?

Ypatybė „margin-top“ su teigiama verte prideda papildomų tarpų nuo viršutinės pozicijos link pasirinkto HTML elemento centro. Pateikta vertė gali būti taškais, procentais, rem arba visuotinėmis reikšmėmis, pvz., auto, inherit, unset ir tt. Kad geriau suprastume, panagrinėkime pavyzdį:



Pavyzdys: Teigiamos vertės panaudojimas



Tarkime, kad HTML failas sukuria „

“ žymą ir pateikia netikrus duomenis. Tada priskirkite „ teigiamas “ reikšmę „div“ elemento klasei:



< kūnas >
< div klasė = 'teigiamas' >
< p > Priskiriamas paraštės viršus su teigiama reikšme p >
div >
kūnas >

Sukūrę HTML struktūrą, pritaikykite CSS ypatybes „ teigiamas ' klasė:



< stilius >
.teigiamas {
plotis: 300 pikselių;
aukštis: 200 pikselių;
fono spalva: miško žalia;
šrifto dydis: 20 pikselių;
spalva: #fff;
paraštė viršuje: 50 piks.;
}
stilius >

Aukščiau pateiktame kodo fragmente:

  • Pirmiausia nustatykite ' reikšmes 300 piks “ ir „ 200 piks 'į CSS' plotis “ ir „ aukščio “ savybes, atitinkamai.
  • Toliau „ fono spalva “, „ šrifto dydis “ ir „ spalva CSS ypatybės naudojamos geresniam vizualizavimui.
  • Galų gale „50 pikselių“ reikšmė pateikiama „ paraštė-viršus “ nuosavybė, norint suteikti papildomos erdvės.

Įvykdžius aukščiau pateiktą kodo fragmentą, tinklalapis atrodo taip:

Aukščiau pateiktas gif iliustruoja puslapio paraštės viršuje esančios nuosavybės vertės nustatymo poveikį.

Kaip naudoti „maržos viršaus“ nuosavybę su neigiama verte?

„ paraštė-viršus ” ypatybė su neigiama reikšme nustato papildomus tarpus nuo viršutinės pozicijos priešais centrą arba link puslapio išorės, palyginti su pasirinktu HTML elementu. Jis dažniausiai naudojamas kuriant persidengiančius efektus arba nustatant HTML elemento padėtį.

Norėdami geriau suprasti, panagrinėkime pavyzdį.

Pavyzdys: neigiamos vertės panaudojimas

Tarkime, kad HTML failas sukuria „

“ žymą ir pateikia netikrus duomenis. Tada priskirkite „ neigiamas “ reikšmę „div“ elemento klasei:

< stilius >
.neigiamas {
spalva: balta;
teksto lygiavimas: centre;
fono spalva: raudona ;
paraštė viršuje: -30 taškų ;
pamušalas: 30px;
aukštis: 100 pikselių;
}
stilius >
< kūnas >
< div klasė = 'neigiamas' >
Priskiriama neigiama reikšmė dėl Margin-top nuosavybė
div >
kūnas >

Aukščiau nurodyto kodo fragmento aprašymas aprašytas toliau:

  • Pirma, „ neigiamas “ klasė yra pasirinkta viduje “ “ žymą, kad pritaikytumėte CSS stilių.
  • Tada nustatykite „ reikšmes 220 taškų “ ir „ raudona 'į CSS' plotis “ ir „ fono spalva ” savybės geresniems vizualizacijos skirtumams sukurti.
  • Tada nustatykite reikšmę ' -30 taškų 'į CSS' paraštė-viršus ' nuosavybė.
  • Po to sukurkite „
    ' žymą ir priskirkite jai klasę ' neigiamas “. Taip pat pateikite netikrus duomenis į div HTML elementą.

Įvykdžius aukščiau pateiktą kodo fragmentą, tinklalapis atrodo taip:

Aukščiau pateiktame gif rodomas poveikis tinklalapio dizainui, nustatant neigiamą viršutinės paraštės nuosavybės vertę.

Išvada

„ paraštė-viršus “ ypatybė naudojama norint sukurti papildomą tarpą tarp HTML elementų. Jis gali būti nustatytas su teigiamomis ir neigiamomis reikšmėmis. Jei ypatybei „margin-top“ priskiriama teigiama reikšmė, tada papildoma erdvė pridedama link tinklalapio centro arba pasirinkto HTML elemento. Jei reikšmė yra „neigiama“, tarpas pridedamas, bet į puslapio išorę. Šiame straipsnyje parodyta, kas yra CSS viršutinė riba.

Kita

Kategorija

Populiarios Temos

Kodėl man negali patikti teksto žinutė „Android“.

Kaip „PyTorch“ gauti tensorinių elementų eksponentus?

Kokie yra geriausi „ChatGPT Chrome“ plėtiniai?

Monostabilaus multivibratoriaus funkcijos supratimas

iconv komanda Linux sistemoje

Kaip įdiegti „Tesseract“ sistemoje „Windows“.

Redis Sentinel

Kaip nustatyti „MariaDB Docker“ diegimą?

Atvirkštinis susietas sąrašas (C++)

Kaip valdyti „Windows“ sistemos atkūrimo taškus?

Kaip įdiegti HAProxy Debian Linux

Kokius „Windows“ telefonus verta pirkti 2023 m

Kaip prisijungti prie MySQL serverio naudojant MySQL ir MySQL Shell

Kaip pasigaminti DaBaby Arms mikstūrą „Roblox Wacky Wizards“.

Kaip ieškoti eilutės keliuose failuose ir grąžinti failų pavadinimus „PowerShell“.

Kaip pridėti elementą prie C++ masyvo

SQL didėjimo tvarka

Kaip pridėti komentarą komandinėje eilutėje

Kaip naudoti HTML adreso žymą?

Kas yra „JavaScript“ metodas array.slice()?