0076 css: display: ...
Lek med css-egenskapen display på JSFiddle
Gör följande.
Spara på ditt eget JSFiddle-konto, eller gör lokalt på datorn. När du är klar länkar du till uppgiften på startsidan, samt laddar upp denna igen till webbhotellet.
Centrera body på sidan och ge den bredden 400 pixlar.
Gör första stycket med p-element grått, det andra rött, det tredje grönt och det fjärde blått. Gör på samma sätt för de fyra stycken med span-element som följer. Det är bakgrundsfärgen som ska sättas, inte textfärgen.
Sätt margin till cirka 10 pixlar på alla p- och span-element.
Stila p-elementen under respektive div som rubriken ovanför beskriver. Sätt css-egenskapen display till angivet värde. Gör lika dant för span-elementen.
Vad är det för skillnad och likhet mellan block, inline, och inline-block? Skriv svaren i din JSFiddle.
Sätt css-egenskapen width på samtliga p- och span-element. Lämpligt värde kan vara 80 pixlar. Har du lärt dig något nytt? Fyll på svaren längst ner i din JSFiddle.
Sätt css-egenskapen height på samtliga p- och span-element. Lämpligt värde kan vara 40pixlar. Har du lärt dig något nytt? Fyll på svaren längst ner i din JSFiddle.
Extra
Experimentera med css-egenskapen overflow på p- och span-elementen.
Referenser
Läs mer om display på Mozilla Developer Network
W3C cheatsheet. Läs t.ex. om p och span.