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
    • 586
    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>
    div.container {
        width: 80%;
        border: 30px solid;
    } {
        box-sizing: border-box;
        width: 50%;
        border: 20px solid yellow;
        float: left;
    <div class="container">
      <div class="box">This is left div.</div>
      <div class="box">This is right div.</div>
      <div style="clear:both;"></div>


 0 Comment(s)

Sign In

Sign up using

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: