close[x]


CSS

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2



learncodehere.com




CSS - Dimension

CSS dimension is used to set dimension of boxes on web pages.

CSS dimension make elements to change the dimensions of surrounds by box.

You can set following properties of a box dimensions:


  • height : This property is used to set the height of a box.
  • width : This property is used to set the width of a box.
  • line-height : This property is used to set the height of a line of text.
  • max-height : This property is used to set a maximum height that a box can be.
  • min-height : This property is used to set the minimum height that a box can be.
  • max-width : This property is used to set the maximum width that a box can be.
  • min-width : This property is used to set the minimum width that a box can be.

  • Example : Dimension

    <html>
    <head>
    </head>

    <body>
    <p style = "width:400px; height:80px; border:1px solid blue;
    padding:5px; margin:10px;">
    1-- CSS stands for Cascading Style Sheets
    </p>

    <p style = "width:400px; height:100px; border:1px solid blue;
    padding:5px; margin:10px; line-height:50px;">
    2-- CSS stands for Cascading Style Sheets
    </p>

    <p style = "width:400px; max-height:80px; border:1px solid blue;
    padding:5px; margin:10px;">
    3-- CSS stands for Cascading Style Sheets
    </p>

    <p style = "width:400px; min-height:80px; border:1px solid blue;
    padding:5px; margin:10px;">
    4-- CSS stands for Cascading Style Sheets
    </p>

    <p style = "max-width:100px; height:200px; border:1px solid blue;
    padding:5px; margin:10px;">
    CSS stands for Cascading Style Sheets
    </p>

    <p style = "min-width:400px; height:100px; border:1px solid blue;
    padding:5px; margin:10px;">
    5-- CSS stands for Cascading Style Sheets
    </p>

    </body>
    </html>

    When the above code is compiled , it produces the following result.

    Result

    css dimension