BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】cssのボックスモデルを解説 余白のパディングと省略について

2022-02-03 03:54:33

上図のように、パディング値は時計回り（上-右-下）の順序で複合属性となり、パディングの内側の余白がボックス サイズの実際の幅と高さに影響を及ぼします。 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrap{width: 200px;height: 200px;
background-color:red;/* padding: 10px; */ /* padding: 10px 20px; */ /* padding: 10px 20px 30px; */padding: 10px 20px 30px; */padding: 10px 20px 30px 40px;}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>

上のコードに示すように、ボックスの実際の幅と高さが変わらないようにするには、そこから追加されたパディングの値を差し引く必要があります!

以上、cssのboxモデルでinner marginのpaddingと省略について解説しました。cssのboxモデルについては、過去の記事を検索するか、引き続き以下の記事を閲覧してください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します