CSS 数値+%を指定してmargin外側の余白(中央)に寄せるサンプル

2022年12月1日

環境
Windows 10 Home 64bit
Google Chrome　107.0.5304.122（Official Build）（64 ビット）

構文
margin : 数値+%　数値+%　数値+%　数値+%
上と右と下と左を指定します
上下左右のmarginに「数値+%」を指定しています。
その場合の%は、親のwidthに対する割合になります。heightではありません。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
  .cftA {
    width: 220px;
     border: 1px solid #000;
  }
  .cftB{
  /*数値+%を指定する */
    margin: 15% 15% 15% 15%; /*margin: 10%;と同じ*/
  }
</style>
</head>
<body>

<div class="cftA">
  <div class="cftB">東京123456</div>
</div>

</body>
</html>

結果
文字「東京」を上下左右のmarginに15%を指定しています

CSS

Posted by arkgame