Väliapujen Käyttäminen Marginaalin ja Täytteen Asettamiseen
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
Can you explain the difference between margin and padding in more detail?
How do I choose the right spacing utility for my layout?
Are there responsive margin and padding classes in Tailwind CSS?
Awesome!
Completion rate improved to 3.57Vä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!
