Väliapujen Käyttäminen Marginaalin ja Täytteen Asettamiseen
Pyyhkäise näyttääksesi valikon
Teet erinomaista työtä!
Oikea etäisyys on ratkaisevan tärkeää visuaalisesti miellyttävien ja selkeästi jäsenneltyjen asettelujen luomisessa. Aiemmin käytimme marginaali- ja täyte-apuluokkia, mutta tarkastellaan niitä nyt yksityiskohtaisemmin.
Marginaali
Tailwind CSS:n marginaali-apuluokkien avulla voidaan hallita elementtien ympärillä olevaa väliä. Niitä käytetään m--etuliitteellä, jota seuraa kokomääre. Marginaalit voidaan asettaa kaikille puolille tai yksittäisille puolille (ylä, oikea, ala, vasen) käyttämällä vastaavia etuliitteitä (mt-, mr-, mb-, ml-).
Esimerkkejä
| Margin Class | Description |
|---|---|
m-4 | Applies a margin of 1rem (16px) to all sides. |
mt-2 | Applies a margin of 0.5rem (8px) to the top side. |
mr-6 | Applies a margin of 1.5rem (24px) to the right side. |
mb-1 | Applies a margin of 0.25rem (4px) to the bottom side. |
ml-3 | Applies a margin of 0.75rem (12px) to the left side. |
index.html
Täyte (Padding)
Tailwind CSS:n täyte (padding) -apuohjelmat ovat samankaltaisia kuin marginaali-apuohjelmat, ja niiden logiikka on sama.
Täytettä voidaan lisätä käyttämällä etuliitettä p- ja sen perässä kokoa. Täytteen voi asettaa kaikille reunoille tai yksittäisille puolille (ylä, oikea, ala, vasen) käyttämällä vastaavia etuliitteitä (pt-, pr-, pb-, pl-).
Esimerkkejä
| Padding Class | Description |
|---|---|
p-4 | Applies a padding of 1rem (16px) to all sides. |
pt-2 | Applies a padding of 0.5rem (8px) to the top side. |
pr-6 | Applies a padding of 1.5rem (24px) to the right side. |
pb-1 | Applies a padding of 0.25rem (4px) to the bottom side. |
pl-3 | Applies a padding of 0.75rem (12px) to the left side. |
index.html
Vaaka- ja pystysuuntainen välistys
Lisäksi marginaaleja ja täytteitä voidaan asettaa vaakasuunnassa (_x-) tai pystysuunnassa (_y-).
Esimerkkejä
| Class | Description |
|---|---|
mx-4 | Applies a margin of 1rem (16px) to the left and right sides. |
my-4 | Applies a margin of 1rem (16px) to the top and bottom sides. |
px-4 | Applies a padding of 1rem (16px) to the left and right sides. |
py-4 | Applies a padding of 1rem (16px) to the top and bottom sides. |
index.html
1. Mikä luokka asettaa 1rem (16px) marginaalin kaikille elementin sivuille?
2. Miten asetetaan 0,5 rem (8px) täyte yläreunaan elementille?
3. Mitkä ovat Tailwind CSS -luokat, joilla asetetaan 2 rem (32px) marginaali elementin ylä- ja alareunaan?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
