Height and width

introduction

Formatting Text

Box Model

Advanced selectors

More about CSS

Height and width property is used to set the height and width to the HTML element. Its values can be set as length, percentage or auto.

Example:

<html>
   <head>
      <title>width and height</title>
      <style>
         .ept{
			 height: 100px;
			 width: 650px;
			 border: 5px solid black;
			 font-size:42px;
			 font-weight:bold;
			 color:blue;
         }
      </style>
   </head>
   <body>
      <div class="ept"> Edupoly Tutorials</div>
   </body>
</html>

Output:

Height and width of image

It is used to set the height and width of an image. It’s value can be in px, cm, percent etc. For responsive images, we use percent values.

Example:

<html>
   <head>
      <title>Height and width of image</title>
      <style>
		 .ept {
		 width:800px;
		 height:200px;
		 border:3px solid black;
		 }
      </style>
   </head>
   <body>
      <h3>Set the width and height of an Image</h3>
      <img class="ept" src="https://edupoly.com/assets/website%20logo.png">
   </body>
</html>

Output:

max-width property

It is used to set the maximum width of a box. We can observe its effect when we resize the browser. It is used for responsive content.

.ept{
	max-width:450px;
}

Here content will resize automatically when we resize the browser to 450px.

min-width property

It is used to set the minimum width of box. We can observe the effect when we resize the browser.

.ept{
	min-width:450px;
}

max-height property

It is used to the maximum height of the box. Like max-width here also we can observe the effect when we resize the browser.

.ept{
	max-height: 400px;
}

Here if you give border to the content, if the content is more than the height it will overflow

min-height property

It is used to set the minimum width of the box. Like min-width here also we can observe the effect when we resize the browser.

.ept{
	min-height: 200ox;
}