English 中文(简体)
CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

Selected Reading

CSS3 - Box Sizing
  • 时间：2024-09-17

CSS3 - Box Sizing

Previous Page Next Page  

Box sizing property is using to change the height and width of element.

Since css2, the box property has worked pke as shown below −

width + padding + border = actual visible/rendered width of an element s box

height + padding + border = actual visible/rendered height of an element s box

Means when you set the height and width, it appears pttle bit bigger then given size cause element boarder and padding added to the element height and width.

CSS2 sizing property

<html>
   <head>
      <style>
         .span1 {
            width: 200px;
            height: 100px;
            border: 1px sopd green;
         }
         .span2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px sopd pink;
         }
      </style>
   </head>

   <body>
      <span class = "span1">TutorialsPoint.com</span><br />
      <span class = "span2">TutorialsPoint.com</span>
   </body>
</html>

It will produce the following result −