2022/10/15 

CSSで要素の余白を設定する

WEBページをデザインするとき、各要素のマージンと余白をどのように調整するかが重要ですよね。

この記事で要素の余白とマージンを指定する方法を記載しました。

余白にはmarginとpaddingがあります。

どちらも要素のまわり余白を指定するものですが、以下のような違いがあります。

  • border:ボーダーのスタイル・太さ・色
  • padding:要素の内側の余白
  • margin:要素の外側の余白


.main {
     /* 種類 
     none ： 枠線なし
     solid ： 実線
     double ： 二重線
     dotted ： 点線
    */
    border: solid;

    /* 幅 | 種類 */
    border: 2px dotted;

    /* 種類 | 色 */
    border: outset #f33;

    /* 幅 | 種類 | 色 */
    border: medium dashed green;

    /* 四辺すべてに適用 */
    padding: 10px;

    /* 上下 | 左右 */
    padding: 10px 10px;

    /* 上 | 左右 | 下 */
    padding: 10px 10px 10px;

    /* 上 | 右 | 下 | 左 */
   padding: 10px 10px 10px 10px;

    /* 上 | 右 | 下 | 左 */
   margin: 10px 10px 10px 10px;
}

バッググランド色、文字色、フォントサイズ

テキスト色、バッググランド色、フォントサイズを指定するときのCSSの記述です。

  • color : テキスト色を指定
  • background : バッググランド色を指定
  • font-size : フォントサイズを指定

.main {
    color: #494949;/*文字色*/
    background: #d8ecf5; /*背景色 */
    font-size: 2rem;
}

サイズの単位

CSSでサイズを指定するときの単位（記述）です。

  • px : ピクセル(pixel)の略で絶対値のサイズを指定する。
  • em : 親要素に対しての倍率でサイズを指定する。
  • rem : ルートのサイズを1とした倍率でサイズを指定する。
  • % : 親要素に対しての％で倍率でサイズを指定する。
  • vh : ビューポートの高さを100として、1～100間で%でサイズを指定する。
  • vw : ビューポートの幅を100として、1～100間で%でサイズを指定する。

:root {
  font-size: 10px;
}

.text {
  font-size: 1.5rem; /* 10 * 1.5 = 15 px */
}