![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS bottom Property
![CSS bottom Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-bottom.webp)
Photo Credit to CodeToFun
🙋 Introduction
The bottom
property in CSS is used to position an element from the bottom of its containing element. It can be used in conjunction with the position property when its value is set to relative, absolute, or fixed.
This property is essential for fine-tuning the vertical positioning of elements in your web design.
💡 Syntax
The syntax for the bottom
property is straightforward. You can specify the offset using length values, percentage values, or the keyword auto.
element {
bottom: value;
}
🎛️ Default Value
The default value of the bottom
property is auto. This means that the element will not be offset from the bottom unless specified otherwise.
🏠 Property Values
Value | Description |
---|---|
length | Specifies the bottom position in units such as px, em, rem, etc. For example, bottom: 20px. |
percentage | Specifies the bottom position as a percentage of the containing element's height. For example, bottom: 10%. |
auto | The default value. The element's bottom position is calculated by the browser. |
📄 Example
In this example, we'll position a box 20 pixels from the bottom of its containing element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS bottom Property Example</title>
<style>
.container {
position: relative;
height: 200px;
border: 1px solid #000;
}
.box {
position: absolute;
bottom: 20px;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<h1>Box Positioned 20px from the Bottom</h1>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
🖥️ Browser Compatibility
The bottom
property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a standard property in CSS and can be used confidently in your web projects.
🎉 Conclusion
The bottom
property is a versatile tool for positioning elements vertically within a containing element. Whether you're fine-tuning the layout of a single element or creating complex designs, understanding how to use the bottom
property effectively can help you achieve the desired results in your web design projects. Experiment with different values and see how this property can enhance the layout and functionality of your websites.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
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
If you have any doubts regarding this article (CSS bottom Property), please comment here. I will help you immediately.