まずは8文字の場合です。 基本的にはこれを使ったほうがいいです。 margin-bottom: 0px;• h2～h6要素は複数登場しても問題無いが、先に述べたように階層構造を意識すること。 この特徴を利用して、navbarなどの作成には非常に便利です。 次に、CSSに「margin」と「padding」を設定してみましょう。 以下のように、bodyタグの中に横幅を指定していないdivタグを記述してみます。
次の
blockquote など ブロック要素のレイアウト特徴 ブロック要素は横幅のサイズにかかわらず、 縦にレイアウトされます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。 ブロックレベル要素の中には、ブロックレベル要素もインライン要素も配置できる• pタグです。 要素の前後に改行が入り、ブロック要素同士縦に並ぶ• padding: 30px;• そして、 インラインブロックとは 「ブロック要素とインライン要素のいいとこを全て兼ね備えた値」と覚えれば、すんなり覚えられるのではないでしょうか。 サイズは、テキストによって決まるため、CSSでwidthやheightの指定はできません。
次の
box. ： 番号が振られてないタグを囲うタグです。 こちらもコメントアウトの理由を書いてあげると親切かな。 インライン要素とブロック要素の違い インライン要素・ブロック要素、それぞれの特徴をおさらいした上で、インライン要素とブロック要素の違いを整理していきましょう。 background-color: f4d923;• div• まず、通常のh1タグの表示を見てみましょう。 ブロックレベル要素（Block-Level Elements） ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 height: 100px;• 以下の物が含まれます。
次の
ブロックレベル要素には、以下のものがあります。 必ず、どちらの要素なのかを知った上でタグを使うようにしましょう。 従って、「imgタグ」をそのまま書けば、自動的に「横並び」にはなるのです。 要素の前後に改行が入らず、インライン要素同士横に並ぶ• 追加で調整の必要はありますが、回り込みは防ぐことができました。 ： 改行したい際に使うタグです。
次の
pタグです。 以下の図はカテゴリー同士の関係を表した図です。 親要素がbody要素の場合 divタグやpタグを記述したとき、画面幅いっぱいに広がってしまったことはありませんか？その原因こそが、このブロックレベル要素の性質です。 インラインの置換要素と同様に、幅や高さは指定できるものの、横に並んで表示されます。 子要素はインライン要素のみ インライン要素（および文字列）のみを直接の子要素として配置できる要素。 タグをインラインブロックにして横に並べようという単純なものです。
次の
display inline 要素がインライン要素化され、横に並びます。 そのため、上下のpaddingが他の要素に被ってしまうインライン要素も、displayプロパティでインラインブロック要素にすることです、他の要素を押しのけるように余白を表示することができます。 知らない人が見たら、なんぞこれ、ってなりそうですので。 HTMLコード 子要素 CSSコード. aタグ2です。 そのため、親要素の200pxの横幅に合わせて、子要素の横幅も200pxになります。 子要素は文字列のみ 文字列のみを配置できる要素。
次の