1月20日の作業データ - WEBサイト制作の勉強

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>余白の設定</title>
<style>
html,body,h1,h2,p{
margin: 0;
padding: 0;
}
div{
width: 300px;
margin: 100px auto;
border:1px solid #000;/* 線幅、線の種類、線の色 */
padding: 20px;
}
h2{
margin-bottom: 20px;
border-left: 15px solid #802020;
padding-left: 15px;
}
img{
margin-bottom: 10px;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1><img src="img/main.jpg" alt=""></h1>
<div>
<h2>商品名1</h2>
<img src="img/01.jpg" alt="">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, harum!</p>
</div>

<div>
<h2>商品名2</h2>
<img src="img/02.jpg" alt="">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, harum!</p>
</div>

<div>
<h2>商品名3</h2>
<img src="img/03.jpg" alt="">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, harum!</p>
</div>


</body>
</html>