bottom attribute syntax in CSS

Bottom attribute syntax and code examples in CSS

In CSS, the bottom attribute is used to specify the distance between an element and the bottom of the container. It controls the position of an element relative to the bottom of its parent element.

The syntax of the bottom attribute is as follows:

element {
    bottom: value;
}

Among them, element represents the element to which the style is to be applied, and value represents the bottom value to be set.

value can be a specific length value, such as pixels (px) or percentage (%). It can also be a specific number, such as a negative value or zero. In addition, the bottom attribute can also use some CSS keyword values, such as auto, initial, and inherit.

Next, let’s look at some specific code examples.

Example 1:
Suppose we have a parent element with a height of 300px and a child element with a height of 100px. We want the child element to be positioned 20px from the bottom of the parent element.

HTML code:

<div class="parent">
    <div class="child"></div>
</div>

CSS code:

.parent {
    height: 300px;
    position: relative;
}

.child {
    height: 100px;
    position: absolute;
    bottom: 20px;
}

In the above code, we set a relative positioning for the parent element so that the child elements can be positioned according to it . Then, we set an absolute position for the child element and set the bottom attribute to 20px. This way the child element will be positioned 20px from the bottom of the parent element.

Example 2:
We can also set the value of the bottom attribute to a percentage.

HTML code:

<div class="parent">
    <div class="child"></div>
</div>

CSS code:

.parent {
    height: 300px;
    position: relative;
}

.child {
    height: 100px;
    position: absolute;
    bottom: 50%;
}

In this example, we set the bottom attribute of the child element to 50%. This means that the child element will be centered at the bottom of the parent element.

Example 3:
If we set the value of the bottom attribute to auto, the child elements will be laid out according to the normal document flow.

HTML code:

<div class="parent">
    <div class="child"></div>
</div>

CSS code:

.parent {
    height: 300px;
}

.child {
    height: 100px;
    margin-top: 200px; /* 将子元素移至父元素底部 */
    position: relative;
    bottom: auto;
}

In this example, we use the margin-top attribute to move the child element to the bottom of the parent element. Then, by setting the bottom attribute to auto, the child elements will be laid out following the normal document flow.

Summary:
The bottom attribute in CSS is used to specify the distance between an element and the bottom of the container. It can be set by pixels, percentage, numeric or keyword value. By properly applying the bottom attribute, we can easily control the position of the element on the page. I hope this article will help you understand and use the bottom attribute in CSS.

The above is the detailed content of bottom attribute syntax in CSS. For more information, please follow other related articles on the PHP Chinese website!