displayプロパティ

display:block;

/*要素をブロック要素にする*/

HTML

<a class="btn href="URL">
ボタン
</a>

CSS

.btn{
   background-color:  #ccc;    /* 背景色 */
   text-align:  center;        /* 文字を要素の中央に */
   color:  #000;               /* 文字の色 */
   width:  300px;              /* 要素の幅指定 */
   padding: 20px 0;            /* 周りの余白指定 */
   border-radius: 10px;        /* 角丸 */
   text-decoration:  none;     /* 文字の下の線を消す */
   display:block;              /* ブロック要素にする */
}

display:inline;

HTML

<div class="contents_test">
横に並べたい！
</div>
<div class="contents_test">
横に並べたい！
</div>
<div class="contents_test">
横に並べたい！
</div>

CSS

.contents_test{
   background-color:  #ccc;    /* 背景色 */
   display:inline;             /* インライン要素にする */
}

display:inline-block;

HTML

<div class="contents_test">
高さを指定しつつ並べたい！
</div>
<div class="contents_test">
高さを指定しつつ並べたい！
</div>
<div class="contents_test">
高さを指定しつつ並べたい！
</div>

CSS

.contents_test{
   background-color:  #ccc;    /* 背景色 */
   width:  170px;              /* 幅指定 */
   padding: 20px 10px;         /* 余白指定 */
   height:  70px;              /* 高さ指定 */
   display:inline-block;       /* インラインブロック要素にする */
}

display:none;

HTML

<div class="display_test">
   ソース上には存在します
</div>
画面上では上の文字は表示されません

CSS

.display_test{
   display:none;   /* 要素を非表示にする */
}

display:flex;

HTML

<header>
   <ul class="flex_menu">
       <li><a href="URL">テキスト</a></li>
       <li><a href="URL">テキスト</a></li>
       <li><a href="URL">テキスト</a></li>
       <li><a href="URL">テキスト</a></li>
       <li><a href="URL">テキスト</a></li>
   </ul>
</header>
<main>
   メインコンテンツ
</main>
<footer>
   フッター
</footer>

CSS

.flex_menu {
   display: flex;                    /* フレキシブルボックスにする */
   justify-content: space-around;    /* 子要素の並び方を指定する */
   padding:  10px;                   /* 余白指定 */
   margin:  0;                       /* デフォルトのスタイルを消す */
   list-style:  none;                /* デフォルトのスタイルを消す */
}
.flex_menu > li {
   padding: 5px;                     /* 余白指定 */
   border-bottom: solid 2px;         /* 下線指定 */
}
.flex_menu > li > a{
   display:  block;                  /* ブロック要素にする */
   text-decoration:  none;           /* デフォルトのスタイルを消す */
   color: #222;                      /* 文字色指定 */
}
main {
   border: solid 1px #ccc;           /* 枠線指定 */
   height: 200px;                    /* 高さ指定 */
   padding:  20px;                   /* 余白指定 */
}
footer {
   background-color:  #ccc;          /* 背景色指定 */
   text-align:  center;              /* 文字中央揃え */
}
body {
   border: solid 1px #aaa;           /* 枠線指定 */
}

display:table; display:table:cell;

HTML

<div class="parent">
    <div class="child">text1</div>
    <div class="child">text2</div>
    <div class="child">text3</div>
    <div class="child">text4</div>
</div>

CSS

.parent{
    display:table;
    width:100;
    border:2px solid red;
}

.child{
display:table-cell;
border:2px solid yellow;
border-collapse:separate;
border-spacing:20px 5px;
}