CSS Padding

CSS Padding

CSS Padding là phần trong từ border đến content. Mỗi thẻ sẽ có phần padding default. Ta có thể xét padding cho thẻ, thì cũng giống border, padding cũng có top, right, bottom, left.

<style>
 p.myStyle1 {
  border:1px solid tomato;
  padding-left: 40px;
 }
</style>

<p class="myStyle1">Padding left 40px</p>

Padding left 40px

Ngoài ra ta cũng có:

padding-right
padding-top 
padding-bottom

Hoặc xét 4 cạnh bằng 40px

padding: 40px;

Hoặc ta xét padding từng cạnh bằng

padding: 10px 20px 30px 40px; /* top right bottom left */

Hoặc ta xét top/bottom left/right

padding: 10px 20px; /* top/bottom left/right */

Hoặc ta xét top left/right bottom

padding: 10px 20px 30px; /* top left/right bottom */

Nếu ta xét width là 400px cho div và thêm padding left là 30px, padding right là 30px, border là 10px vào thì div sẽ có tổng width là 400(width) + 30(padding-left) + 30(padding-right) + 10(border-left) + 10(border-right) = 480px. Để khi xét width là 400px, 400px này là bao gồm content, padding, border luôn, thì ta dùng thêm box-sizing: boder-box;

<style>

 div.myStyle2 {
   border:10px solid tomato;
   width: 400px;
   background-color: yellow;
 }

 div.myStyle3 {
   border: 10px solid violet;
   width: 400px;
   padding: 0px 30px;
   background-color: lightcyan;
   box-sizing: content-box;
 }


 div.myStyle4 {
   border: 10px solid green;
   width: 400px;
   padding: 0px 30px;
   background-color: lightcyan;
   box-sizing: border-box;
 }

</style>

<div class="myStyle2">This is a paragraph.This is a paragraph</div>
<div class="myStyle3">This is a paragraph.This is a paragraph</div>
<div class="myStyle4">This is a paragraph.This is a paragraph</div>
This is a paragraph.This is a paragraph
This is a paragraph.This is a paragraph
This is a paragraph.This is a paragraph

Tóm lại box-sizing : border-box; thì khi ta xét width là 400 thì 400 này là bao gồm content, padding, border luôn.