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>
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.