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
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!
