Please Allow Notifications

If you want to get our blog posts notification, you can subscribe our website by clicking on allow notification button



FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 773

What is CSS3 Height Property?


2021-11-16 14:03 · 3 min read

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.

 

Height Property

We can change the Height of an HTML Element by using the 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>

 

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 the viewport 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.


 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

what is new in miui 11?...
best free web hosting services...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
CSS3 RESPONSIVE UI...
Tables HTML...
How to host a web page in 10 minutes....
How to use CSS3 Overflow Property?...
CSS3 FUNCTIONS...
CSS3 FILTERS...
CSS3 SHAPES...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© blog.theprodevelopers.com 2022. All Rights Reserved. Powered by Pro Developer