ブロック要素とインライン要素を見分け、要素を中央に配置する定番のテクニックを学びましょう。
このレッスンを Kodokon で開くボックスはページ上でどう並ぶのでしょうか？それはすべて、display プロパティで制御される表示モード次第です。ブロック要素はレンガのように振る舞います。利用できる幅いっぱいを占め、次の要素を新しい行へ押し出します。見出し <h1>、段落 <p>、そして <div> タグ（特に意味を持たない汎用のボックス）は、既定でブロックです。インライン要素は文の中の単語のように振る舞います。自分のコンテンツの分だけスペースを取り、隣の要素の横に並びます。リンク <a> と <span> タグ（<div> のインライン版）は、既定でインラインです。
<p>A paragraph: I take up the full width.</p>
<p>Me too, so I start on a new line.</p>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<span>A span, also on the same line.</span>display プロパティを使うと、この振る舞いを変えられます。リンクに display: block; を付けると幅いっぱいを占めるようになり、<div> に display: inline; を付けるとテキストの中に流し込まれるようになります。インライン要素の重要な制約に注意してください。width と height プロパティはインライン要素では無視されます。要素に大きさを与えるには、ブロックでなければなりません。
a {
display: block;
width: 200px;
background-color: lightblue;
}次は、すべての初心者が尋ねる中央配置についてです。1つ目のケースは、ボックスの中のテキストを中央に配置することです。text-align: center; プロパティをコンテナに適用すると、そのインラインコンテンツ（テキスト、リンク、画像）が中央に配置されます。2つ目のケースは、ページの中央にあるカードのような、ブロックボックス全体を中央に配置することです。定番のテクニックは、ボックスに幅を与えてから margin: 0 auto; と書くことです。auto の値は、左右のマージンをブラウザ自身に計算させます。それらを等しくするので、ボックスが中央に来ます。
.card {
width: 300px;
margin: 0 auto;
text-align: center;
border: 1px solid gray;
padding: 16px;
}このモジュールで学んだことをまとめましょう。CSSファイルを接続する方法、セレクタ・プロパティ・値でルールを書く方法、タグ・クラス・idで要素を狙う方法、パディング・ボーダー・マージンのバランスを取る方法、テキストにスタイルを付ける方法、そして今、ボックスを並べて中央に配置する方法を知っています。これらの土台があれば、すでにシンプルで洗練されたWebページを作れます。次のモジュールでは、より強力なレイアウトツールを紹介します。
width: 200px; が <span> に効かないのはなぜですか？