「CSS」paddingプロパティを個別に要素の内側の空白を指定する方法

2021年7月28日

書式
上側の幅 padding-top
右側の幅 padding-right
下側の幅 padding-bottom
左側の幅 padding-left
使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
.cftA {
width: 350px;
border: 3px solid SkyBlue;
}
.cftB {
/*上側の幅を指定*/
padding-top: 25px;
/*右側の幅を指定*/
padding-right: 15px;
/*下側の幅を指定*/
padding-bottom: 10px;
/*左側の幅を指定*/
padding-left: 20px;
}
</style>
<div class="cftA">
<div class="cftB">paddingプロパティを個別に指定する</div>
</div>
<style> .cftA { width: 350px; border: 3px solid SkyBlue; } .cftB { /*上側の幅を指定*/ padding-top: 25px; /*右側の幅を指定*/ padding-right: 15px; /*下側の幅を指定*/ padding-bottom: 10px; /*左側の幅を指定*/ padding-left: 20px; } </style> <div class="cftA"> <div class="cftB">paddingプロパティを個別に指定する</div> </div>
<style>
  .cftA {
    width: 350px;
    border: 3px solid SkyBlue;
  }
  .cftB {
     /*上側の幅を指定*/
    padding-top: 25px;
     /*右側の幅を指定*/
    padding-right: 15px;
      /*下側の幅を指定*/
    padding-bottom: 10px;
      /*左側の幅を指定*/
    padding-left: 20px;
  }
</style>
<div class="cftA">
  <div class="cftB">paddingプロパティを個別に指定する</div>
</div>

 

CSS

Posted by arkgame