Skip to main content

Css Margin-block-start Example


The margin-block-start CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.

Syntax


/* <length> values */
margin-block-start: 10px; /* An absolute length */
margin-block-start: 1em; /* relative to the text size */
margin-block-start: 5%; /* relative to the nearest block container's width */

/* Keyword values */
margin-block-start: auto;

/* Global values */
margin-block-start: inherit;
margin-block-start: initial;
margin-block-start: unset;

It corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.

It relates to margin-block-end, margin-inline-start, and margin-inline-end, which define the other margins of the element.


Values


The margin-block-start property takes the same values as the margin-left property.


Formal definition



























Initial value0
Applies tosame as margin
Inheritedno
Percentagesdepends on layout model
Computed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation typea length

Formal syntax


<'margin-left'>

Examples


Setting block start margin


HTML

<div>
<p class="exampleText">Example text</p>
</div>

CSS

div {
background-color: yellow;
width: 120px;
height: 120px;
}

.exampleText {
writing-mode: vertical-lr;
margin-block-start: 20px;
background-color: #c8c800;
}

Result


Specifications



Browser compatibility








































DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
margin-block-start
69
79
41
No
56
12.1
69
69
41
48
12.2
10.0

See also




Comments

Popular posts from this blog

530 Valid Hostname Is Expected When Setting Up IIS 10 For Multiple Sites

C Perror Example

Converting A String To Int In Groovy