※ ChatGPTを利用し、要約された質問です（原文：paddingとpositionが分かりません）
paddingとpositionの違いとは？
このQ&Aのポイント
html&cssの超初心者です。paddingとpositionの使い方について教えてください。
div要素の中でpaddingを使うと要素内のコンテンツを移動させることができます。
一方、positionを使うと要素自体を移動させることができます。
html&cssの超初心者です。勉強している教本で下記のソースがあり、cssのdiv.introの「徒然なるままに」と「 MyWeb」の間が狭いので「徒然なるままに」の左側に余白を入れたいのですが、どうもうまくいきません。 padding-left: 10px; とかpadding: 0px 0px 0px 10px; と試みたのですがダメで、position: relative; left: 10px; と入力すると移動しました。このソースのそれぞれのdivの中でにpaddingで移動するところとpositionで移動する箇所があり、その理由がわかりません。どなたか教えてくれませんか？ よろしくお願い致します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html ; charset=Shift_JIS">
<title>代表的な段組を記述する</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
div.title {
float: left;
width: 200px;
}
div.title h1 {
margin: 0px;
font-size: 300%;
font-family: "Times New Roman",Century,serif;
background-color: #00aa00;
color: white;
text-align: center;
}
div.intro {
font-size: 90%;
padding: 0.5em;
}
div.navi {
clear: both;
background-color: green;
color: yellow;
padding: 3px;
font-family: Verdana,sans-serif;
}
div.navi a {
color: white;
text-decoration: none;
}
div.menu {
float: left;
width: 25%;
padding: 0.5em;
margin-right: 0.3em;
border-right: dashed 1px green;
background-color: #ccffcc;
}
div.main {
padding: 0.5em 1em;
}
div.main h2 {
font-family: Verdana,Arial,sans-serif;
margin: 0px;
border-bottom: solid 3px #00cc00;
}
div.main p {
line-height: 1.4;
}
div.footer {
clear: both;
background-color: green;
color: white;
padding: 3px;
}
div.footer p.returnlink {
text-align: center;
margin: 0em 0px 0.5em 0px;
}
div.footer p.returnlink a {
color: white;
}
div.footer p.copyright {
margin: 0px;
font-size: 80%;
font-family: Verdana,Arial,sans-serif;
text-align: right;
}
</style>
</head>
<body>
<div class="title">
<h1>MyWeb</h1>
</div>
<div class="intro">
徒然なるままに、日記を書いてみたり駄文を書いてみたり…。掲示板へのネタ投稿も歓迎です。(^-^)
</div>
<div class="navi">
<a href="home.html">HOME</a> |
<a href="prof.html">プロフィール</a> |
<a href="diary.html">日記</a> |
<a href="essay.html">エッセイ</a> |
<a href="bbs.html">掲示板</a> |
<a href="links.html">リンク</a>
</div>
<div class="menu">
<p>日記メニュー</p>
<ul>
<li><a href="200X08.html">200X年 8月</a></li>
<li><a href="200X07.html">200X年 7月</a></li>
<li><a href="200X06.html">200X年 6月</a></li>
<li><a href="200X05.html">200X年 5月</a></li>
<li><a href="200X04.html">200X年 4月</a></li>
<li><a href="200X03.html">200X年 3月</a></li>
</ul>
</div>
<div class="main">
<h2>200X年9月</h2>
<p>
9月になりました。朝夕の電車内には（大学生を除く）学生の姿も多くなりました。
学生の夏休みは終わったようですが、私はまだ今年の夏休みを取っていません…。
ああー、いつ休めるのかなあ。(^_^;)
</p>
</div>
<div class="footer">
<p class="returnlink"><a href="home.html">HOMEへ戻る</a></p>
<p class="copyright">Copyright © 200X Sakura Kinomoto.</p>
</div>
</body>
</html>
お礼
ORUKA1951様 何度もご親切にお教え頂き有難うございました。 なんかうっすらと分かってきたような 気がします。 ★ボックスモデルで勉強してみます。 本当に有難うございました。