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

    • 0
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 319
    Comment on it

    What is box-sizing ?

    Box-sizing is a css3 property. It is used to tell browser that width padding border should include the object according to size, which is define by user.

    For example, you have a text area with 100% width then it will render on browser with 100% + default border width + padding. To handle it, we are using box-sizing.

    Box-Sizing Syntax's -

    box-sizing: content-box
    box-sizing: padding-box
    box-sizing: border-box

    box-sizing : content-box -

    This is the default style. The width and height properties includes content only not the border, margin, or padding.

    box-sizing : padding-box -

    The width and height include the padding size, and it does not include the border and margin.

    box-sizing : border-box -

    The width and height include the padding and border, not the margin.

    Example 1-

    With box-sizing: border-box

    Note :- This works with all major browser and IE8+

 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: