Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block below:

margin-block - CSS: Cascading Style Sheets

Baseline Widely available *

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

margin-block: 10px 20px;
writing-mode: horizontal-tb;

margin-block: 20px 40px;
writing-mode: vertical-rl;

margin-block: 5% 20%;
writing-mode: horizontal-tb;

margin-block: 1rem auto;
writing-mode: vertical-lr;

<section id="default-example">
  <div id="container">
    <div class="row">One</div>
    <div class="row transition-all" id="example-element">Two</div>
    <div class="row">Three</div>
  </div>
</section>

#container {
  width: 300px;
  height: 200px;
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}

.row {
  height: 33.33%;
  display: inline-block;
  border: solid #ce7777 10px;
  background-color: #2b3a55;
  color: #ffffff;
  flex-shrink: 0;
}

#example-element {
  border: solid 10px #ffbf00;
  background-color: #2b3a55;
}

This property is a shorthand for the following CSS properties:

• margin-block-start
• margin-block-end

/* <length> values */
margin-block: 10px 20px; /* An absolute length */
margin-block: 1em 2em; /* relative to the text size */
margin-block: 5% 2%; /* relative to the nearest block container's width */
margin-block: 10px; /* sets both start and end values */
margin-block: anchor-size(inline);
margin-block: calc(anchor-size(width) / 4) 1em;

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

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

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

The margin-block property may be specified using one or two values.

• When one value is specified, it applies the same margin to both start and end.
• When two values are specified, the first margin applies to the start, the second to the end.

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

margin-block = 
  <'margin-top'>{1,2}  
<margin-top> = 

  <length-percentage>  |
  auto                 |
  <anchor-size()>      
<length-percentage> = 

  <length>      |
  <percentage>  
<anchor-size()> = 

  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  
<anchor-name> = 

  <dashed-ident>  
<anchor-size> = 

  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

div {
  background-color: yellow;
  width: 120px;
  height: auto;
  border: 1px solid green;
}

p {
  margin: 0;
  margin-block: 20px 40px;
  background-color: tan;
}

.verticalExample {
  writing-mode: vertical-rl;
}

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3