border: sẽ bôi màu ra bên ngoài padding
width: chỉ bao gồm độ rộng của content(tức là KHÔNG bao gồm padding)
vì vậy công thức để tính khoảng rộng của 1 element là:
width+2*padding+2*border+2*margin
Nhận xét:
- không bao giờ có thể nhìn tường minh được phần width của một element.
- chỉ có thể nhìn tường minh được phần width và padding của element (sd thuộc tính background-color)
https://www.w3schools.com/css/css_boxmodel.asp
Source code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 330px;
padding: 10px;
margin: 0;
background-color:gray;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px.</div>
</body>
</html>
Calculate the total width:
The picture above is 350px wide. The total width of this element is also 350px.
sai lầm hay gặp phải khi layout sd css float: NHẬN THỨC sai về width của element cần float(cứ nghĩ đổi background-color của element thì sẽ nhìn thấy width của element)
ReplyDeletecss3 có 1 giai pháp cho vấn đề này:
ReplyDeleteđó là sd {box-sizing: border-box;} để làm cho trình duyệt hiểu rằng thuộc tính width là bao gồm cả content và padding