CSSのdisplayプロパティ

display: block

横幅の領域が100%に広がる表示形態です。
下記の例では通常ではinlineであるspan要素をdisplay:blockでブロック要素化して表示させています。

span {
  display: block;
  background-color: red;
  color: #fff;
}

display:block有り

test

display:block無し

test

display: inline

コンテンツサイズに応じて伸縮する表示形態です。
次の例ではブロック要素であるpをdisplay:inlineで内容に合わせて伸縮するようにしています。

p {
  display: inline;
  background-color: red;
  color: #fff;
}

display:inline有り

test

display:inline無し

test

display: inline-block

横並びできるinlineの特徴を持ちつつも縦横幅を指定できる表示形態です。

a {
  display: inline-block;
  width: 200px;
  height: 50px;
  background-color: red;
  color: #fff;
}

test1 test2

display: noneとvisibility: hidden

display: noneは領域ごと表示しない表示形態です。
visibility: hiddenの場合は領域は表示しつつ、中身は非表示という形になります。

display:none;

ここにdisplay:noneのdiv↓

testtest

ここにdisplay:noneのdiv↑

visibility: hidden;

ここにvisibility:hiddenのdiv↓

testtest

ここにvisibility:hiddenのdiv↑

display: list-item

ul liのようにリストマークを表示させる表示形態です。リストマークはボックス外なのでmargin-leftをかけてやる必要があります。

p {
  display:list-item;
  margin-left:2em;
}

test

test

test