「CSS」paddingを個別に指定するサンプル

2022年7月4日

環境
Google Chrome　103.0.5060.66（Official Build）

構文
1.padding-top
値 paddingを上に指定します

2.padding-right : 値
paddingを右に指定します

3.padding-bottom : 値
paddingを下に指定します

4.padding-left : 値
paddingを左に指定します

使用例

<!DOCTYPE html>

<html>

<head>

<style>

.cftA {

width: 200px;

border: 1px solid #000;

}

.cftB {

padding-top: 25px;

padding-right: 15px;

padding-bottom: 30px;

padding-left: 40px;

}

</style>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html> <html> <head> <style> .cftA { width: 200px; border: 1px solid #000; } .cftB { padding-top: 25px; padding-right: 15px; padding-bottom: 30px; padding-left: 40px; } </style> </head> <body> <div class="cftA"> <div class="cftB">テスト22222</div> </div> </body> </html>

<!DOCTYPE html>
<html>
<head>
<style>
  .cftA {
    width: 200px;
    border: 1px solid #000;
  }
  .cftB {
    padding-top: 25px;
    padding-right: 15px;
    padding-bottom: 30px;
    padding-left: 40px;
  }
</style>
</head>
<body>

<div class="cftA">
  <div class="cftB">テスト22222</div>
</div>

</body>
</html>

CSS

Posted by arkgame

関連投稿: