CSS3 > Height/Width

Height and width in CSS3

How to set the height and width properties in CSS3?


Height and width

It is used to set the height and width of an element, it increases and decreases the height and width 

<style>
    .class1{
        height:100px;
        border:2px solid green;
        width:200px;
    }
</style>
</head>

<body>
    <p>Height and width</p>
   <div class="class1">Techfunda is a online tutorial</div>
</body> 

In the above code snippet we have defined the height and width properties in the style sheet

output 

Min height

It is used to provide the minimum height, min height provides the height of 100px 

<style>
    .class1{
        min-height:100px;
        border:1px solid green;
        width:200px;
        background-color:violet;
    }
</style>
</head>

<body>
    <p>MinHeight</p>
   <div class="class1">Techfunda is a online tutorial</div>
</body> 

Min height

In the above code snippet we have defined the min height, min height provides the height as 100 px 

output

Max height

It is used set the maximum height than the given height by giving the max width value 

<style>
    .class1{
       
        max-height:20px;    
        border:1px solid green;
        width:200px;
        background-color:violet
      
    }
</style>
</head>

<body>
    <p>MaxHeight</p>
   <div class="class1">Techfunda is a online tutorial</div>
</body> 

Max height

In the above code snippet we have defined the max height, It prevents the used value of the height property.

output

Min width

It provides the minimum width by giving the min width value 

<style>
    .class1{    
        border:2px solid blue;
        min-width:100px;
        background-color:green;
      }
</style>
</head>

<body>
    <p>MinWidth</p>
   <div class="class1">Techfunda is a online tutorial</div>
</body> 

Min width

In the above code snippet we have defined the min width with 100px

output 

Max width

It provides the max width to the given element

<style>
        .class1{    
            border:2px solid blue;
            max-width:100px;
            background-color:pink;
      
        }
    </style>
    </head>

    <body>
        <p>Max  Width</p>
       <div class="class1">Techfunda is a online tutorial</div>
    </body> 

Max width

In the above code snippet we have defined the max width withe 100px, It prevents the used value of the width property.

output 

Image width and height

We can provide the height and width to the image 

 <p>Image width and height</p>
    <img src="aaple.jpg"  height="100" width="200"/>

Image width and height

In the above code snippet we have defined the image with height and width as 100 and 200 

output

 Views: 917 | Post Order: 114



Write for us