Inline- och blockelement med padding, border och margin

Läs på om hur inline och block element fungerar! Html och CSS, detta är bara två av alla sidor som finns.

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.

  1. På taggen span sätter du kantlinjen till 1px solid och färgen till #e7e, vad händer med sidan?
  2. På taggen span sätter du padding till 20px, vad händer med sidan?
  3. På taggen span sätter du margin till 20px, vad händer med sidan?
  4. På taggen span sätter du display till block, vad händer med sidan?
  5. Ta bort allt du har gjort på span
  6. På taggen div sätter du kantlinjen till 1px solid och färgen till #e00, vad händer med sidan?
  7. På taggen div sätter du padding till 20px, vad händer med sidan?
  8. På taggen div sätter du margin till 20px, vad händer med sidan?
  9. På taggen div sätter du display till inline, vad händer med sidan?
  10. 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. 

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Mallsida</title>
</head>
<body>
	<div>
		<div>Div i Div</div>
		<div>Div i Div</div>
	</div>
	<div style="width: 180px">
		Morbi magna eros, venenatis in <span>pellentesque</span> sit amet,
		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.
	</div>
	<div>Div nr0</div>
	<div>Div nr1</div>
	<div>Div nr2</div>
	<div>Div nr3</div>
	<div>Div nr4</div>
	<div>Div nr5</div>
	<div>Div nr6</div>
	<div>Div nr7</div>
	<div>Div nr8</div>
	<div>Div nr9</div>
	<br>
	<br>
	<br>
	<br>
	<div style="width: 580px">
		<span>Span nr0</span><span>Span nr1</span><span>Span nr2</span><span>Span
			nr3</span><span>Span nr4</span><span>Span nr5</span><span>Span nr6</span><span>Span
			nr7</span><span>Span nr8</span><span>Span nr9</span>
	</div>
</body>
</html>