Controlling the Size of an Element

The size-related properties are described in the following table:

widthSet the width auto or <length> or <%>
heightSet the height auto or <length> or <%>
min-widthSet the minimum width auto or <length> or <%>
min-heightSet the minimum height auto or <length> or <%>
max-widthSet the maximum width auto or <length> or <%>
max-heightSet the maximum height auto or <length> or <%>
box-sizingSets which part of an element's box is used for sizing.content-box | padding-box | border-box | margin-box

auto means browser would do calcluation.

The default value for all these properties is auto.

The percentage values are calculated from the width of the containing block.

        <style type="text/css"> 
        div { 
            width: 75%; 
            height: 100px; 
            border: thin solid black; 
        p { 
            background: lightgray; 
            border: 4px solid black; 
            margin: 2px; 
            height: 50%; 
                    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).

Click to view the demo

If the user resizes the browser window, the body element will be resized and this will lead to div element being resized.

  HTML CSS Book 

  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