デザイナー成長物語

グラフィックデザイナーだった自分がweb業界に飛び込み学んだことをアウトプットする場

CSS基本:ブロックレベル要素とインライン要素

css基本のブロック要素とインライン要素自分用にメモ

 ブロックレベル要素とは

文章の骨組みとなる要素

  • 縦並び
  • 幅と高さの指定OK
  • marginとpaddingの指定OK
  • vertical-align指定NG

対象タグ

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、
<h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul> 



 インライン要素とは

ブロックレベル要素の内容として用いられる要素

  • 横並び
  • 幅と高さの指定NG
  • marginとpaddingの左右のみ指定OK
  • vertical-align指定OK

対象タグ

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>



display:block

インライン要素をブロックレベル要素として生成する

display:inline-block

  • 横並び
  • 幅と高さの指定OK
  • marginとpaddingの指定OK
  • vertical-align指定OK



今までブロック要素を無理やりfloatかけて横並びしてた・・・反省