The Developer Brains


HEIGHT PROPERTY

Web Designing | Web Development


SEE MORE














</CSS3 HEIGHT>




What is CSS3 Height Property?

CSS3 Height property is used to specify the height of an HTML element. The height of the HTML elements does not include border, margin, padding, etc. So, by default, the CSS3 Height property defines the height of the content area.



SEE MORE




















</CSS3 Height Property>

Give a proper height to HTML elements.


Height Property

We can change the Height of an HTML Element by using CSS width property.
We normally use px, vh, and % unit for height property.

Example

{height  :  10px;}
           
property  value

SYNTAX

  • width: auto | value | initial | inherit;

Note:

  • If you are designing a relative layout then you can use height % and height px unit.
  • If you are designing a responsive layout, please don't use height property, because this can create a problem in layout designing.
  • The max-width and min-hight properties override the CSS height property.

	
		<!DOCTYPE html>
	<html>
		<head>
			<style>
				.tdb-height{	
					width:200px;
					height:300px;
					background-color:black;
					color:white;
					padding:10px;}
			</style>
		</head>
	<body>
	<p class="tdb-height">css height property</p>
	</body>
	</html>
	
	
	

Try it Yourself







</CSS3 Height Property>

different values of css3 height property


Property: values

If you are working on a responsive layout then set the default value of height.
  • length: We can define the height in px, %, cm, etc.
  • vh: Defines view-port height of the containing block
  • %: Defines the height in percent of the containing block
  • Auto: Default value of height property
  • Initial: Sets this property to its default value.
  • Inherit: Child element inherits height property from its parent element.




















Which is not a Value of height property....

1. px
2. %
3. cm
4. hv



Check Now



CSS3 QUIZ







Next: where to use CSS3 Margin Property


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers