Box-sizing

What is a box-sizing How do you make a box-sizing? This script and codes were developed by Elad Shechter on 16 September 2021, Thursday.

How do I make an box-sizing?
  1. Box-sizing Previews
  2. Box-sizing HTML Codes
  3. Box-sizing CSS Codes
Box-sizing Previews

Box-sizing HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>box-sizing</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="box box1">
  <h3>Old Box Model<br>(content-box)</h3>
</div>
<div class="box box2">
  <h3>padding-box</h3>(width include padding)
</div>
<div class="box box3">
  <h3>border-box</h3>(width include padding & border)
</div>
  
  
</body>
</html>

Box-sizing CSS Codes

.box{
  width:200px;
  height:200px;
  float:left; 
  margin-right:10px;
  background-color:yellow;
  background-clip:content-box;
  padding:20px;
  border:solid 20px #000;
  font-weight:bold;
}

.box1{
  box-sizing:content-box; 
  -moz-box-sizing:content-box;
}

.box2{
  box-sizing:padding-box; 
  -moz-box-sizing:padding-box;
}

.box3{
  box-sizing:border-box; 
  -moz-box-sizing:border-box;
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.