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

  • Use of Box Sizing

    @mukul.kant
    Recommendations Offline Message

    • 0
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 349
    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+

    HTML5 html css3 css box-sizing box-sizing syntax
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: