Hogyan adjunk margót egy oldalhoz hátszélben?

Hogyan Adjunk Margot Egy Oldalhoz Hatszelben



A Tailwind CSS-ben a árrés az adott elem körüli távolság szabályozására szolgál. Helyet ad az alkalmazott elem és a környező elemei közé. A Tailwind CSS margó segédprogramokat és margóértékeket biztosít, amelyek lehetővé teszik a felhasználók számára, hogy testreszabják a kívánt elemek közötti távolságot. Ezenkívül a felhasználók margót adhatnak egy adott elem egyetlen oldalához, például egy adott elem tetejéhez, aljához, baljához vagy jobbjához.

Ez a blog példákat mutat be arra, hogyan lehet margót adni egy elem egyetlen oldalához a Tailwind CSS-ben.







Hogyan adjunk margót egy oldalhoz hátszélben?

Ha margót szeretne hozzáadni egy elem egyetlen oldalához a Tailwind programban, a következő hasznossági osztályok használhatók:



A jobb megértéshez nézze át az alábbi példákat.



1. példa: Margó hozzáadása egy elem tetejéhez





Ebben a példában a „ mt-14 ' használati osztály a '

” elemet 14 egység margó hozzáadásához a tetejére:

< test >

< div osztály = 'h-96 mt-14 bg-purple-500' >

< p osztály = 'text-5xl text-center' > Árrés ban ben Hátszél CSS p >

div >

test >


Itt:



    • ' h-96 ” osztály a
      tároló magasságát 96 egységre állítja be.
    • ' mt-14 ” osztály 14 egységnyi margót alkalmaz a tartály tetejére.
    • ' bg-lila-500 ” osztály a lila színt állítja be a konténer hátterére.

Kimenet


A fenti kimenet azt mutatja, hogy a margó hozzáadásra került a tároló tetejéhez.

2. példa: Margó hozzáadása egy elem aljához

Ebben a példában a „ mb-14 ' osztály a '

” elemet 14 egység margó hozzáadásához az alján:

< test >

< div osztály = 'h-96 mb-14 bg-purple-500' >

< p osztály = 'text-5xl text-center' > Árrés ban ben Hátszél CSS p >

div >

test >


Kimenet


Látható, hogy a margót hozzáadták a tartály aljához.

3. példa: Margó hozzáadása egy elem bal oldalához

Ebben a példában a „ ml-14 ' osztály a '

” elemet 14 egységnyi margó hozzáadásához a bal oldalához:

< test >

< div osztály = 'h-96 ml-14 bg-purple-500' >

< p osztály = 'text-5xl text-center' > Árrés ban ben Hátszél CSS p >

div >

test >


Kimenet


A fenti kimenet azt mutatja, hogy a margó hozzáadásra került a tárolóelem bal oldalán.

4. példa: Margó hozzáadása egy elem jobb oldalán

Ebben a példában a „ Mr-14 ' osztály a '

” elemet 14 egységnyi margó hozzáadásához a jobb oldalon:

< test >

< div osztály = 'h-96 mr-14 bg-purple-500' >

< p osztály = 'text-5xl text-center' > Árrés ban ben Hátszél CSS p >

div >

test >


Kimenet


Amint látja, a margót hatékonyan hozzáadták a tároló jobb oldalához.

Következtetés

Ha egy elem egyetlen oldalához margót szeretne hozzáadni a Tailwind programban, különféle hasznossági osztályok használhatók, mint például ' ml-<érték> ”, „ mr-<érték> ”, „ mt-<érték> ”, és „ mb-<érték> ”. Ezek az osztályok margót adnak az adott elem bal, jobb, felső és alsó oldalához. A felhasználók különböző értékeket adhatnak meg a margó méretéhez. Ez a blog példákat mutat be arra, hogyan lehet margót adni egy elem egyetlen oldalához a Tailwind CSS-ben.