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.
Keskeiset seikat lohkotason elementeistä:
- Oletuksena
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 elementti voidaan keskittää vanhempaansa.
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 is the difference between block-level and inline 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.
Keskeiset seikat lohkotason elementeistä:
- Oletuksena
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 elementti voidaan keskittää vanhempaansa.
index.html
index.css
Kiitos palautteestasi!
