ディスプレイ：インラインとディスプレイ：ブロック

次のCSSの基本的な違いは何ですか。

display:inline

この：

display:block

要素でこれらを別々に使用すると、同じ結果が得られます。

display：blockは、段落とヘッダーが常に表示されているため、要素がブロックとして表示されることを意味します。ブロックには上下に空白があり、（たとえば、別の要素にfloat宣言を追加するなどして）順序付けされている場合を除いて、その隣にHTML要素はありません。

display：inlineは、要素が現在のブロック内の同じ行にインラインで表示されることを意味します。2つのブロックの間にある場合にのみ、要素は「匿名ブロック」を形成しますが、その幅は可能な限り最小です。

表示オプションの詳細については、http：//www.quirksmode.org/css/display.htmlをご覧ください。

ブロック

利用可能な全幅を占め、前後に新しい行を表示します（display：block;）

列をなして

必要なだけの幅を使用し、新しい行を強制しません（display：inline;）

display: block -要素の前後の改行

display: inline -要素の前後に改行を入れない

ここに比較表があります：

ここで例を表示できます。

display: block;作成ブロックレベルに対し、素子をdisplay: inline;作成インラインレベル要素。cssボックスモデルに慣れていない場合、違いを説明するのは少し難しいですが、ブロックレベルの要素はドキュメントのフローを分割しますが、インライン要素はそうではありません。

ブロックレベル要素のいくつかの例が含まれます：div、h1、p、およびhrHTMLタグ。

インラインレベル要素のいくつかの例が含まれます：a、span、strong、em、b、およびiHTMLタグ。

個人的には、インライン要素を活版印刷要素として考えるのが好きです。これは完全にまたは技術的に正しいわけではありませんが、ほとんどの場合、インライン要素はテキストのように動作します。

このトピックに関する記事は、こちらで詳しく読むことができます。このスレッドの他の何人かの人々が引用しているのを見て、それは読む価値があるかもしれません。

表示：ブロックは行全体、つまり改行なしで表示されます

Display：inlineは、必要なスペースのみを使用します。

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

このフィドルhttp://jsfiddle.net/RJXZM/1/で例を参照できます。

ブロック要素は、親を埋めるために展開されます。

インライン要素は、子を保持するのに十分な大きさに縮小します。

表示ブロック

画面の行全体（100％）を取ります。常に画面サイズの100％です。

表示ブロックの例

display：inline-blockは必要な幅を占めます。画面サイズの1％から100％にすることができます

インラインブロックの例を表示する

それが私たちが持っている理由です divとspanあります。

Divのデフォルトのスタイリングは表示ブロックです。画面の幅全体を取ります

スパンのデフォルトのスタイリングはdisplay：inline blockです：spanは新しい行から開始せず、必要なだけの幅を占めます

要素に背景色を追加すると、他のポスターで説明されているように、インラインとブロックの違いが見やすくなります。

Display：blockこれは「p」タグとほとんど同じように動作し、行全体を占め、フローティングになるまでその隣に要素はありません。Display：inline必要なだけスペースを使用し、他の要素を横に並べることができます。

フォームの場合にこれらのプロパティを使用すると、理解が深まります。

ブロックまたはインラインブロックは幅（例：幅：400px）を持つことができますが、インライン要素は幅の影響を受けません。インライン要素は次のテキスト行にまたがることができます（例：http: //codepen.io/huijing/pen/PNMxXLは、ブラウザウィンドウのサイズを変更してそれを表示します）が、ブロック要素はできません。

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

ブロック要素：div、p、見出しが好きな要素はブロックレベルです。それらは改行から始まり、親要素の全幅を占めます。 インライン要素：b、i、span、imgが好きな要素はインラインレベルです。それらは改行から始まることはなく、コンテンツの幅を占めます。

デフォルトでは、インライン要素は強制的に新しい行をドキュメントフローで開始しません。一方、ブロック要素は通常、改行を発生させます。このリンクを参照できます