Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS height Property

Posted in CSS Tutorial
Updated on Oct 03, 2024
By Mari Selvan
👁️ 13 - Views
⏳ 4 mins
💬 1 Comment
CSS height Property

Photo Credit to CodeToFun

🙋 Introduction

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

This property allows you to define how tall an element should be, either in absolute terms (such as pixels) or relative terms (such as percentages or viewport units). Proper use of the height property is crucial for creating responsive and well-structured web layouts.

💡 Syntax

The syntax for the height property is simple and versatile. It can be applied to block-level and inline-block elements.

Syntax
Copied
Copy To Clipboard
element {
  height: value;
}

Here, value can be any of the valid units or keywords.

🎛️ Default Value

The default value of the height property is auto, which means the height is calculated based on the content of the element and any other applied styles.

🏠 Property Values

ValueDescription
autoThe browser calculates the height.
lengthDefines a fixed height in units such as px, em, rem, etc.
percentageSets the height as a percentage of the containing element's height.
max-contentThe intrinsic height of the content.
min-contentThe minimum intrinsic height of the content.
fit-contentClamps the height between min-content and max-content.

📄 Example

In this example, we'll set the height of a div element to 200 pixels.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS height Property Example</title>
  <style>
    .box {
      width: 100px;
      height: 200px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <h1>Div with Fixed Height</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The height property is universally supported across all modern browsers. This includes the latest versions of Chrome, Firefox, Safari, Edge, and Opera, as well as older versions of Internet Explorer. This ensures consistent behavior across different user environments.

🎉 Conclusion

The height property is a fundamental CSS property for controlling the vertical size of elements.

By understanding and utilizing the various units and values available, you can create flexible, responsive, and visually appealing web designs. Experiment with different settings to see how the height property can enhance your web projects.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy