Setting the Sized Box

box-sizing sets which part of an element's box is used for sizing. Its allowed values:

  • content-box
  • padding-box
  • border-box
  • margin-box
 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        div { 
            width: 75%; 
            height: 100px; 
            border: thin solid black; 
        } 
        p { 
            background: lightgray; 
            border: 4px solid black; 
            margin: 2px; 
            height: 50%; 
        } 
        #first { 
            box-sizing: border-box; 
            width: 50%; 
        } 
        #second { 
            box-sizing: content-box; 
        } 

        
        </style> 
    </head> 
    <body> 
        <div> 
            <p> 
                    HyperText Markup Language (HTML) is the main markup language for 
                    displaying web pages and other information that can be displayed 
                    in a web browser(From From Wikipedia, the free encyclopedia).
            </p> 
            <p id='first'> 
                    HyperText Markup Language (HTML) is the main markup language for 
                    displaying web pages and other information that can be displayed 
                    in a web browser(From From Wikipedia, the free encyclopedia).
            </p> 
            <p id='second'> 
                    HyperText Markup Language (HTML) is the main markup language for 
                    displaying web pages and other information that can be displayed 
                    in a web browser(From From Wikipedia, the free encyclopedia).
            </p> 

        </div> 
    </body> 
</html>
  
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Size:
  1. Controlling the Size of an Element
  2. Setting Minimum height
  3. Setting Minimum width
  4. Setting Maximum width
  5. Setting Maximum height
  6. Setting the Sized Box
Related: