復習⑤

授業　復習 

<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<p class="p1">
<img src="img/f3.gif" width="200" height="200" alt="pic">段落１のテキストです。段落１のテキストです。段落１のテキストです。</p>
<p class="p2">
段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。
</p>
<p class="p3">
<img src="img/f3.gif" width="200" height="200" alt="pic">段落3のテキストです。段落3のテキストです。段落3のテキストです。
</p>
<p class="p4">
段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。段落2のテキストです。
</p>
</div>
</body>
</html>

@charset"UTF-8";
/* リセット */
body,class,p,img{
  margin: 0;
  padding: 0;
}

/* 全体 */ 
body {
  font-size: 16px;
  line-height: 1.5;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
#content{
  width: 380px;
  margin: 50px 0 0 50px;
}
p.p1 img{
  float: left;
}
p.p2{
  clear: left;
  margin-bottom: 1.0em;
}
p.p3 img{
  float: right;
}
p.p4{
  clear: right;
}