CSS_ブロックレベル要素とインライン要素

ブロックレベル要素

 文章を構成する基本となる要素
見出し・段落・表・リストなど。
<h1> - <h6> 、<div> 、<ol> 、<ul> 、<table> 、<form> ,etc.

一つのブロック ( かたまり ) として認識される。
ブラウザでの表示も一つのブロックとして扱われることが多く、
一般的なブラウザでは前後に改行が入る

特徴

  • 縦に並んで要素が表示される。
  • 幅 ( width ) 高さ ( height ) が指定できる。
  • 上下左右に margin が指定できる。
  • 上下左右に padding が指定できる。
  • text-align は要素の中身に適応される。
  • vertical-align は指定できない。

  

インライン要素

 主にブロックレベル要素の内容として用いられる要素。
文章の一部として扱われる。
<p> 要素中の <strong>要素のように、段落の中の一部を
強調するような使われ方をする。
<br> 、<b> 、<font> 、<input> 、<select> 、<small> 、<span> ,etc.

一般的なブラウザでは前後に改行が入らず
文章の一部として表示される。

特徴 ( ブロックレベル要素と逆 )

  • 横に続けて要素が表示される。
  • 幅 ( width ) 高さ ( height ) は指定できない。
    内容物のサイズによって変わる。
  • 左右だけ margin を指定できる。
  • 左右だけ padding を指定できる。
  • text-align を親ブロックにつけることが出来る。
  • vertical-align を指定できる。

 

配置ルール

ブロックレベル要素の中に
他のブロックレベル要素インライン要素
配置することが出来る

 

インライン要素の中には、
ブロックレベル要素配置することは出来ない
文字データ他のインライン要素
配置することはできる

 

 

こちらから
http://www.htmq.com/htmlkihon/005.shtml
http://morobrand.net/mororeco/css/display-property/
https://bibabosi-rizumu.com/block-level-inline/

 

以上。