Differences
This shows you the differences between two versions of the page.
|
webbutv_03 [2018-09-07 11:01] Joakim Forsgren |
webbutv_03 [2022-07-18 13:20] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Inline och block element med padding, border och margin ====== | ||
| - | Läs på om hur inline och block element fungerar! [[https:// | ||
| - | |||
| - | Uppgifter att göra efter genomgången av inline och block element och hur padding, border och margin fungerar på block och inline element. | ||
| - | |||
| - | Du skall i din style.css göra följande och efter varje ändring skall du ladda om sidan och se vad som händer. | ||
| - | - På taggen span sätter du kantlinjen till 1px solid och färgen till #e7e, vad händer med sidan? | ||
| - | - På taggen span sätter du padding till 20px, vad händer med sidan? | ||
| - | - På taggen span sätter du margin till 20px, vad händer med sidan? | ||
| - | - På taggen span sätter du display till block, vad händer med sidan? | ||
| - | - Ta bort allt du har gjort på span | ||
| - | - På taggen div sätter du kantlinjen till 1px solid och färgen till #e00, vad händer med sidan? | ||
| - | - På taggen div sätter du padding till 20px, vad händer med sidan? | ||
| - | - På taggen div sätter du margin till 20px, vad händer med sidan? | ||
| - | - På taggen div sätter du display till inline, vad händer med sidan? | ||
| - | - Testa lite mer så att du förstår vad inline och block element är och hur padding, border och margin fungerar. Var extra noga med att fatta att marginaler kollapsar till den största av de två som finns på intilliggande taggar. | ||
| - | |||
| - | HTML att utgå ifrån, CSS:en kan vara tom från början. | ||
| - | <code html> | ||
| - | |||
| - | < | ||
| - | <html lang=" | ||
| - | < | ||
| - | <meta charset=" | ||
| - | <link rel=" | ||
| - | < | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | </ | ||
| - | <div style=" | ||
| - | Morbi magna eros, venenatis in < | ||
| - | condimentum ac metus. Integer felis ligula, posuere vitae rhoncus | ||
| - | quis, blandit at massa. Suspendisse potenti. Etiam laoreet leo eu | ||
| - | purus lacinia et fringilla odio ultricies. Nunc placerat blandit velit | ||
| - | eget varius. Sed euismod ornare massa vitae laoreet. Aliquam erat | ||
| - | volutpat. | ||
| - | </ | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | < | ||
| - | <br> | ||
| - | <br> | ||
| - | <br> | ||
| - | <br> | ||
| - | <div style=" | ||
| - | < | ||
| - | nr3</ | ||
| - | nr7</ | ||
| - | </ | ||
| - | </ | ||
| - | </ | ||
| - | |||
| - | |||
| - | </ | ||
| - | |||
| - | |||
| - | |||
| - | |||