margin-top#

#Introduction

The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

#Examples

css-apisrc/margin-top/App.tsx

Code

Preview

#Syntax

/* <length> values */
margin-top: 0.5em;
margin-top: 0;
margin-top: 2rpx;

/* <percentage> value */
margin-top: 10%;

#Values

#0px

Default value.

#<length>

<length> means that the size of the margin as a fixed value.

#<percentage>

The size of the margin as a percentage, relative to the inline size (width) of the containing block.

#auto

Selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

#Formal definition

#Formal syntax

margin-top =
  <length-percentage>  |
  auto                 |

<length-percentage> =
  <length>      |
  <percentage>

#Difference with the Web

mdn: margin-top

1. In Lynx, margins will not collapse at any time.
2. Currently, Lynx supports using auto in flex, grid and linear children that are not with position:fixed/absolute/sticky. Additionally, in linear layout, it only supports using auto on the cross axis. We plan to support using auto on the main axis in the future.

#Compatibility