Padding and element width - with box-sizing

PHOTO EMBED

Sun Sep 20 2020 11:56:04 GMT+0000 (UTC)

Saved by @sailomtaaley #css

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}
​
div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>
</head>
<body>
​
<h2>Padding and element width - with box-sizing</h2>
​
<div class="ex1">This div is 300px wide.</div>
<br>
​
<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>
​
</body>
</html>
​
content_copyCOPY

ต้องกำหนด Box ให้ DIV ก่อน จึงสามารถกำหนดระยะ Padding ได้ถูกต้อง

https://www.w3schools.com/css/tryit.asp?filename=trycss_padding_width2