Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS Box Sizing

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 286
    Comment on it

    The property which is used to calculate the height & width of an element is known as box-sizing.

    Syntax :- 

    box-sizing: content-box|border-box|initial|inherit;

    1. content-box :-  It is the default property where, border, padding, or margin are not included and the width and height properties (and min/max properties) includes only the content.

    2. border-box :- It does not include the margin in width and height properties. It only includes content, padding and border.

    3. initial :-  It sets the property to its default value.

    4. inherit :- Inherits this property from its parent element.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.container {
        width: 80%;
        border: 30px solid;
    }
    
    div.box {
        box-sizing: border-box;
        width: 50%;
        border: 20px solid yellow;
        float: left;
    }
    </style>
    </head>
    <body>
    
    <div class="container">
      <div class="box">This is left div.</div>
      <div class="box">This is right div.</div>
      <div style="clear:both;"></div>
    </div>
    
    </body>
    </html>
    
    

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: