Työskentely Lohkotason Elementtien Kanssa
Lohkotason elementit ovat suorakulmaisia ja asettuvat päällekkäin, estäen muita elementtejä jakamasta samaa riviä. Tätä käyttäytymistä ohjaa CSS-ominaisuus display: block.
Tärkeimmät seikat lohkotason elementeistä:
- Oletusarvona
display: block; - Leveys ulottuu koko vanhemman säiliön leveydelle;
- Korkeus määräytyy sisällön mukaan, mutta sitä voidaan muokata CSS:llä;
- Alkaa aina uudelta riviltä;
- Ominaisuuksia kuten
border,margin,padding,widthjaheightvoidaan säätää.
Tarkastellaan esimerkkiä, jossa muokataan width, height ja margin:
index.html
index.css
Tarkastellaan, kuinka voimme keskittää elementin sen vanhemman sisälle.
index.html
index.css
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain how to center a block-level element inside its parent?
What are some common ways to adjust the spacing between block-level elements?
Can you show more examples of customizing block-level elements with CSS?
Awesome!
Completion rate improved to 2.56Työskentely Lohkotason Elementtien Kanssa
Pyyhkäise näyttääksesi valikon
Lohkotason elementit ovat suorakulmaisia ja asettuvat päällekkäin, estäen muita elementtejä jakamasta samaa riviä. Tätä käyttäytymistä ohjaa CSS-ominaisuus display: block.
Tärkeimmät seikat lohkotason elementeistä:
- Oletusarvona
display: block; - Leveys ulottuu koko vanhemman säiliön leveydelle;
- Korkeus määräytyy sisällön mukaan, mutta sitä voidaan muokata CSS:llä;
- Alkaa aina uudelta riviltä;
- Ominaisuuksia kuten
border,margin,padding,widthjaheightvoidaan säätää.
Tarkastellaan esimerkkiä, jossa muokataan width, height ja margin:
index.html
index.css
Tarkastellaan, kuinka voimme keskittää elementin sen vanhemman sisälle.
index.html
index.css
Kiitos palautteestasi!
