...

Web Technologies - CSS3

Back to Course

Lesson Description


Lession - #531 CSS3 Box Sizing

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

Since css2, the box property has worked like 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 seems little bigger then given size cause element boarder and padding added to the part height and width.

Example



<html>
   <head>
      <style>
          .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid blue;
         }
         .div2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid yellow;
         }
      </style>
   </head>

   <body>
       <div class = "div1">techedhub.com</div><br/>
      <div class = "div2">techedhub.com</div>
        
   </body>
</html>


Try it here

CSS3 User Interface