- p の中身がアルファベットの羅列だと文章として認識しないのか、きちんと折り返されないで、一直線に表示される。
- p はブロック要素だから幅が指定できる。
- margin: 0 auto; と記述すれば、親要素の真ん中に配置できる。
- p のインライン要素として写真を取り扱うときは、img{vertical-align: bottom;} でリセットしないと、ディセンダの分文字よりも上に表示される。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>p について考える</title>
<style>
html, body, p{
margin: 0;
padding: 0;
line-heigt: 1.0;
}
body{
background: #FFFFEE;
font-size: 30px;
}
#container{
background: #FFFFFF;
width: 500px;
height: 300px;
margin: 0 auto;
}
p{
width: 450px;
margin: 0 auto;
}
</style>
</head><body>
<div id="container">
<p>あるふぁべっとだとうまくいかないからしかたがなしにひらがなをにゅうりょくしています。</p>
<p>photography<img src="photo01.jpg" width="185" height="129" alt="photo"></p>
</div><!--container-->
</body>
</html>
