CSS - Height

The height property of CSS is used to set the height of an element in HTML.

An important thing to note is that the height property does not contain borders, margins or padding.

Height property in CSS with numeric value

We can specify a numeric value for height property and the height would be displayed accordingly.

Example :

<html>
<head>
	<style>
		p {
			border-style: solid;
  			height: 30px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you look at the above example, a border is created having 30px height. And that is because we have set the value of height property to 30px.

<style>
	p {
		border-style: solid;
		height: 30px;
	}
</style>

Now, let us look at another example, where we have a long paragraph.

Example :

<html>
<head>
	<style>
		p {
			border-style: solid;
  			height: 30px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		In a huge pond, there lived many fish. <br/>
		They were arrogant and never listened to anyone. <br/>
		In this pond, there also lived a kind-hearted crocodile. <br/>
		He advised the fish, not to be arrogant and overconfident. <br/>
	</p>
</body>
</html>

Output :

Now, if you look at the above output, the paragraph came out of the border and didn't fit properly.

So, you can have two options as a solution.

First is that you can increase the value of height property.

And second way is the use of auto as value. Let us see that next.

Height property in CSS with value as auto

Example :

<html>
<head>
	<style>
		p {
			border-style: solid;
  			height: auto;
  		}
	</style>	
</head>
	
<body>
	<p> 
		In a huge pond, there lived many fish. <br/>
		They were arrogant and never listened to anyone. <br/>
		In this pond, there also lived a kind-hearted crocodile. <br/>
		He advised the fish, not to be arrogant and overconfident. <br/>
	</p>
</body>
</html>

Output :

Now, if you look at the above output, the long paragraph had fit exactly inside the border.

And that is because we have set the value of height property as auto.

<style>
	p {
		border-style: solid;
		height: auto;
	}
</style>

The value of height property as auto adjusts the height according to the height of the <p> element.

❮❮ PREV NEXT ❯❯