Css div content top

The top CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.

Try it

The effect of top depends on how the element is positioned (i.e., the value of the position property):

When position is set to absolute or fixed , the top property specifies the distance between the element’s outer margin of top edge and the inner border of the top edge of its containing block.
When position is set to relative , the top property specifies the distance the element’s top edge is moved below its normal position.
When position is set to sticky , the top property is used to compute the sticky-constraint rectangle.
When position is set to static , the top property has no effect.

When both top and bottom are specified, position is set to absolute or fixed , and height is unspecified (either auto or 100% ) both the top and bottom distances are respected. In all other situations, if height is constrained in any way or position is set to relative , the top property takes precedence and the bottom property is ignored.

Читайте также: Learning java best books

Syntax

/* values */ top: 3px; top: 2.4em; /* s of the height of the containing block */ top: 10%; /* Keyword value */ top: auto; /* Global values */ top: inherit; top: initial; top: revert; top: revert-layer; top: unset;

Values

A negative, null, or positive that represents:

for absolutely positioned elements, the distance to the top edge of the containing block.
for relatively positioned elements, the distance that the element is moved below its normal position.

for absolutely positioned elements, the position of the element is based on the bottom property, while height: auto is treated as a height based on the content; or if bottom is also auto , the element is positioned where it should vertically be positioned if it were a static element.
for relatively positioned elements, the distance of the element from its normal position is based on the bottom property; or if bottom is also auto , the element is not moved vertically at all.

Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a , , or the auto keyword.

Formal definition

Initial value	auto
Applies to	positioned elements
Inherited	no
Percentages	refer to the height of the containing block
Computed value	if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation type	a length, percentage or calc();

Formal syntax

Examples

A positioned element set 10% from the top

body  background: beige; > div  position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; >

div>The size of this content is determined by the position of its edges.div>

Specifications

Browser compatibility

BCD tables only load in the browser

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to Align Inline-Block Elements to the Top of Container

Many developers have problems with the alignment of inline-block elements. The problem is when some inline-block elements have different heights, why does the shorter of them not align to the top of the container? We are going to show the solution to this problem with the help of CSS properties.

Let’s discuss an example below.

Create HTML

div class="container"> span class="small-box"> span> span class="big-box"> span> div>

Add CSS

Set the border, height and width of the «container».
Set the display to «inline-block» and specify the border and width of the «container» and
Set the height and background of the «small-box» and «big-box».

.container < border: 1px solid #666666; width: 350px; height: 150px; > .container span < display: inline-block; border: 1px solid #666666; width: 40%; > .small-box < height: 30%; background: #1c87c9; > .big-box < height: 50%; background: #8ebf42; >

Example of creating two inline-block elements:

html> html> head> title>Title of the document title> style> .container < border: 1px solid #666666; width: 350px; height: 150px; > .container span < display: inline-block; border: 1px solid #666666; width: 40%; > .small-box < height: 30%; background: #1c87c9; > .big-box < height: 50%; background: #8ebf42; > style> head> body> div class="container"> span class="small-box"> span> span class="big-box"> span> div> body> html>

Our problem is to align the «small-box» to the top of the container. The «top» value of the vertical-align property can help us solve this problem.

The vertical-align property defines the vertical alignment of an inline element. The «top» value aligns the top of the aligned subtree with the top of the line box.

We must apply the vertical-align property to the «small-box» only to make it start at the top of the container.

.small-box < vertical-align: top; >

So, now our problem is solved with just one CSS property. Let’s see the full code.

Example of aligning the inline-block elements to the top of the container with the vertical-align property:

html> html> head> title>Title of the document title> style> .container < border: 1px solid #666666; width: 350px; height: 150px; > .container span < display: inline-block; border: 1px solid #666666; width: 40%; > .small-box < height: 30%; background: #1c87c9; vertical-align: top; > .big-box < height: 50%; background: #8ebf42; > style> head> body> div class="container"> span class="small-box"> span> span class="big-box"> span> div> body> html>

Result

Let’s see another example where one of the elements has a larger height than the rest of the elements.

Here is the example where an error occurs.

Example of aligning the inline-block elements to the top of the container with an error:

html> html> head> title>Title of the document title> style> #box-one < background-color: #1c87c9; > #box-two < background-color: #8ebf42; > #box-three < background-color: #cccccc; > #box-four < background-color: #666666; > .normal < height: 100px; width: 100px; display: inline-block; > .big < height: 200px; width: 200px; display: inline-block; > ul li < display: inline-block; > style> head> body> ul> li> span id="box-one" class="normal">Blue span> li> li> span id="box-two" class="normal">Green span> li> li> span id="box-three" class="normal">Grey span> li> li> span id="box-four" class="big"> The last div vertically aligns to its content's last line of text. How to align the top of all the colored divs. span> li> ul> body> html>

We just need to replace the display property with the float property. Set the float property to «left». So, in our example, we use the float property, which in most cases is used with the clear property on an element. It specifies what elements can float beside the cleared element and on which side. Here, we set the clear to «both», which means that the floating elements are not allowed on both right and left sides.

Example of aligning the inline-block elements to the top of the container with the float property:

html> html> head> title>Title of the document title> style> #box-one < background-color: #1c87c9; > #box-two < background-color: #8ebf42; > #box-three < background-color: #cccccc; > #box-four < background-color: #666666; > .normal < height: 100px; width: 100px; display: inline-block; > .big < height: 200px; width: 200px; display: inline-block; > ul < clear: both; content: ""; display: table; > ul li < float: left; list-style-type: none; > style> head> body> ul> li> span id="box-one" class="normal">Blue span> li> li> span id="box-two" class="normal">Green span> li> li> span id="box-three" class="normal">Grey span> li> li> span id="box-four" class="big"> The last div vertically aligns to its content's last line of text. How to align the top of all the colored divs. span> li> ul> body> html>

In the following example, we align the inline-block level elements using the «flex» value of the display property, which is used with -Webkit- extension.

Example of aligning the inline-block elements to the top of the container with the «flex» value of the display property:

html> html> head> title>Title of the document title> style> div < color: #ffffff; display: flex; display: -webkit-flex; align-items: flex-start; -webkit-align-items: flex-start; > #box-one < background-color: #1c87c9; > #box-two < background-color: #8ebf42; > #box-three < background-color: #cccccc; > #box-four < background-color: #666666; > .normal < height: 100px; width: 100px; display: inline-block; > .big < height: 200px; width: 200px; display: inline-block; padding: 10px; > style> head> body> div> span id="box-one" class="normal">Blue span> strong id="box-two" class="normal">Green strong> span id="box-three" class="normal">Grey span> span id="box-four" class="big"> The last div vertically aligns to its content's last line of text. How to align the top of all the colored divs. span> div> body> html>

Источник

CSS top Property

Set the top edge of the positioned element 50px down from the top edge of its nearest positioned ancestor:

More «Try it Yourself» examples below.

Definition and Usage

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

If position: absolute; or position: fixed; — the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
If position: relative; — the top property makes the element’s top edge to move above/below its normal position.
If position: sticky; — the top property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
If position: static; — the top property has no effect.

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS2
JavaScript syntax:	object.style.top=»100px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
auto	Lets the browser calculate the top edge position. This is default	Demo ❯
length	Sets the top edge position in px, cm, etc. Negative values are allowed. Read about length units	Demo ❯
%	Sets the top edge position in % of containing element. Negative values are allowed	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Use the top property with a negative value and for an element with no positioned ancestors:

div.b <
position: absolute;
top: -20px;
border: 3px solid blue;
>

div.c position: absolute;
top: 150px;
border: 3px solid green;
>

Источник

Css div content top