Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div class="page ha-focus">
	<h1 class="ha-screen-reader">The live cheat sheet of the display property visible values</h1>
	<nav class="page__navigation" data-uia-control-skin="2">
		<ul class="ra-list page__navigation-list uia-scroller" role="tablist" data-uia-control-skin="3">
			<li class="page__navigation-group uia-scroller__item" role="presentation">
				<button class="page__navigation-button ra-button uia-control" type="button" role="tab" aria-selected="true" aria-controls="block-tab" id="block">
					<span class="uia-control__group">display: block</span>		
				</button>
			</li>
			<li class="page__navigation-group uia-scroller__item" role="presentation">
				<button class="page__navigation-button ra-button uia-control" type="button" role="tab" aria-selected="false" aria-controls="inline-tab" id="inline" tabindex="-1">
					<span class="uia-control__group">display: inline</span>
				</button>            
			</li>
			<li class="page__navigation-group uia-scroller__item" role="presentation">
				<button class="page__navigation-button ra-button uia-control" type="button" role="tab" aria-selected="false" aria-controls="inline-block-tab" id="inline-block" tabindex="-1">
					<span class="uia-control__group">display: inline-block</span>
				</button>              
			</li>
			<li class="page__navigation-group uia-scroller__item" role="presentation">
				<button class="page__navigation-button ra-button uia-control" type="button" role="tab" aria-selected="false" aria-controls="flex-tab" id="flex" tabindex="-1">
					<span class="uia-control__group">display: flex</span>
				</button>              
			</li>
			<li class="page__navigation-group uia-scroller__item" role="presentation">
				<button class="page__navigation-button ra-button uia-control" type="button" role="tab" aria-selected="false" aria-controls="inline-flex-tab" id="inline-flex" tabindex="-1">
					<span class="uia-control__group">display: inline-flex</span>
				</button>            
			</li>
			<li class="page__navigation-group uia-scroller__item" role="presentation">
				<button class="page__navigation-button ra-button uia-control" type="button" role="tab" aria-selected="false" aria-controls="grid-tab" id="grid" tabindex="-1">
					<span class="uia-control__group">display: grid</span>
				</button>          
			</li>
			<li class="page__navigation-group uia-scroller__item" role="presentation">
				<button class="page__navigation-button ra-button uia-control" type="button" role="tab" aria-selected="false" aria-controls="inline-grid-tab" id="inline-grid" tabindex="-1">
					<span class="uia-control__group">display: inline-grid</span>
				</button>                 
			</li>
		</ul>
	</nav>
	<aside class="page__graphic-description" aria-hidden="true">
		<div class="page__infographics">
			<div class="page__infographics-text">
				<p>Note! Please, look at the following graphic before reading the cheat sheet. I use it to mark elements areas</p>
			</div>
			<div class="page__graphic">
				<span class="page__graphic-parent">I'm a parent area</span>
				<span class="page__graphic-child">I'm a child area</span>
			</div>
		</div>
	</aside>
	<main class="page__container">
		<section id="block-tab" aria-labelledby="block" role="tabpanel" tabindex="0" class="page__content" aria-labelledby="block-heading">
			<h2 id="block-heading" class="ha-screen-reader">The block value</h2>
			<h3>Default behavior</h3>
			<p>
				<span class="page__point">1</span>
				The width property fills up all available space by the text direction. The height property is calculated automatically depending on the content size.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with short text</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block with some text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding more text</span>
				</div>
			</div>
			<p>
				If the content doesn't fit on one line then browsers will move it to a new line.
			</p>
			<p class="ha-screen-reader">The element has the multi-line text. The height of the element is calculated depending on the text.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text</span>
				</div>
			</div>			
			<p>
				<span class="page__point">2</span>
				The elements always start on a new line.
			</p>
			<p class="ha-screen-reader">There are two elements with display block. They are displayed below each other in a column.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items default position</span>
				</div>
			</div>
			<h3>Box model features</h3>
			<p>
				<span class="page__point">3</span>
				We can set the width and height properties for elements.
			</p>
			<p class="ha-screen-reader">The element has the width and height properties with the 148px value. As a result a browser displays a square.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the width and height properties are applied the item</span>
				</div>	
			</div>			
			<p>
				<span class="page__point">4</span>
				The padding and border properties can be applied too.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: block #1</span>
						</div>
						<div class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: block #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: block #1</span>
						</div>
						<div class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: block #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">borders are applied to the items</span>
				</div>	
			</div>
			<p>
				But there are surprises in the case with margins. They will end up outside the parent vertically.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item</span>
				</div>
			</div>	
			<p>
				And if we set the border or padding property for the parent, margins stop to end up outside it. 
			</p>
			<p class="ha-screen-reader">There are the parent and child elements. I define the padding property for the parent and the margin property for the child. As a result margins stop to end up outside the parent. </p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block</span>
								</div>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent</span>
				</div>	
			</div>
			<p>
				But if does with only one side, margins will stop ending up outside the parent with this side but will still with the opposite.
			</p>
			<p class="ha-screen-reader">There are the parent and child elements. I define the top padding property for the parent and the margin property for the child. As a result margins stop to end up outside the top edge of the parent but continue to end up outside the bottom edge.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding-top">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when padding-top is applied to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border-top">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block</span>
								</div>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when border-top is applied to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding-bottom">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when padding-bottom is applied to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border-bottom">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block</span>
								</div>
							</div>	
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when border-bottom is applied to the parent</span>
				</div>	
			</div>
			<p>
				Margins stop to end up outside the parent after adding the overflow property with a value that's different from visible.
			</p>
			<p class="ha-screen-reader">There are the parent and child elements. I define the overflow property with the auto value for the parent and the margin property for the child. As a result margins stop to end up outside the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block</span>
								</div>																	
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when overflow: auto is applied to the parent</span>
				</div>
			</div>
			<p>
				The margins of adjacent elements collapse too. The browsers choose the biggest between the two.
			</p>			
			<p class="ha-screen-reader">There are the parent and two child elements. I define the margin property for two childs. As a result top margins of the first element end up outside the top edge of the parent, bottom margins of the second element end up outside the bottom edge of the parent. Margins between child elements are overlapped each other.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to items when paddings or borders aren't applied to the parent</span>
				</div>
			</div>
			<p>
				The padding, border and overflow properties can't change it.
			</p>
			<p class="ha-screen-reader">There are the parent and two child elements. I define the padding property for and the margin property for two childs. Margins between child elements are overlapped each other.</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #3</span>
								</div>							
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #4</span>
								</div>							
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #3</span>
								</div>							
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #4</span>
								</div>							
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when overflow: auto is applied to the parent</span>
				</div>
			</div>	
			<p>
				margin: auto doesn't work.
			</p>
			<p class="ha-screen-reader">There are the parent and child. I define margin auto for the child. It is displayed in the top left edge of the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport"style="height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item</span>
				</div>
			</div>
			<p>
				It starts to work horizontally if we define the width property.
			</p>
			<p class="ha-screen-reader">There are the parent and child. I define margin auto and width 375px for the child. It is displayed in the center of the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to it</span>
				</div>
			</div>
		</section>
		<section id="inline-tab" aria-labelledby="inline" role="tabpanel" tabindex="0" class="page__content" aria-labelledby="inline-heading" hidden>
			<h2 id="inline-heading" class="ha-screen-reader">The inline value</h2>
			<h3>Default behavior</h3>
			<p>
				<span class="page__point">1</span>
				The width and height properties are calculated automatically depending on the content.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with short text</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline with some text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding more text</span>
				</div>
			</div>
			<p>
				If the content doesn't fit on one line then browsers will move it to a new line.
			</p>
			<p class="ha-screen-reader">The element has the multi-line text. The width is calculated depending on the maximum line length. The height is calculated depending on the text.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: element with display: inline with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text</span>
				</div>	
			</div>
			<p>
				<span class="page__point">2</span>
				If there is space elements will be on the same line. If not, browsers will move the part of them to a new line.
			</p>
			<p class="ha-screen-reader">There are three elements. The first two are displayed in full on the first line. The beginning of the third element is displayed on the first line and the end on the next line.</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">								
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">								
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>
							<span class="demo-box">								
								<span class="demo-box__text">I'm the item with display: inline #4</span>
							</span>
							<span class="demo-box">								
								<span class="demo-box__text">I'm the item with display: inline #5</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items default position</span>
				</div>
			</div>
			<h3>Box model features</h3>
			<p>
				<span class="page__point">3</span>
				The width and height properties can be defined to elements but they won't affect them.
			</p>
			<p class="ha-screen-reader">The element has the width and height properties with the 148px value. But a browser doesn't display a square.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>		
						</div>
					</div>
					<span class="page__demo-caption">the width and height properties are applied the item</span>
				</div>	
			</div>	
			<p>
				<span class="page__point">4</span>
				You can set paddings, borders and margins. Vertical values will end up outside the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">			
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items</span>
				</div>
			</div>
			<p>
				Also, paddings, borders and margins can overlap paddings and borders of the parent.
			</p>
			<div class="page__remark remark" aria-hidden="true">
				<p>
					Note! I didn't show all cases because area colors of the child and parent will blend. So I chose cases with contrasting colors.
				</p>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-padding" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #1</span>
								</span>
								<span class="demo-box is-padding" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #2</span>
								</span>	
							</div>	
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items when borders are applied to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-border" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-border" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items when paddings are applied to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">			
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent</span>
				</div>
			</div>		
			<p>
				Paddings, borders and margins overlap each other if elements are in multiple rows.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>							
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #4</span>
							</span>	
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #5</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #6</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #7</span>
							</span>	
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>							
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #4</span>
							</span>	
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #5</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #6</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #7</span>
							</span>	
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items</span>
				</div>
			</div>
			<p>
				In the case with multiline elements margins can end up outside by horizontal.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="text-align: start">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>							
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #4</span>
							</span>	
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #5</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #6</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #7</span>
							</span>	
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when text-align: start is applied to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="text-align: end">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>							
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #4</span>
							</span>	
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #5</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #6</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #7</span>
							</span>	
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when text-align: end is applied to the parent</span>
				</div>
			</div>
			<p>
				The overflow property crops margins if a value is different from the visible value.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #1</span>
								</span>
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #2</span>
								</span>						
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when overflow: auto is applied to the parent</span>
				</div>
			</div>
			<p>
				There's no point using margin: auto for elements because it won't work.
			</p>
			<p class="ha-screen-reader">There are the parent and child. I define margin auto for the child. It is displayed in the top left corner of the parent.</p>
			<div class="page__demos" aria-hidden="true">			
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item</span>
				</div>
			</div>
		</section>
		<section id="inline-block-tab" aria-labelledby="inline-block" role="tabpanel" tabindex="0" class="page__content" aria-labelledby="inline-block-heading" hidden>
			<h2 id="inline-block-heading" class="ha-screen-reader">The inline-block value</h2>
			<h3>Default behavior</h3>
			<p>
				<span class="page__point">1</span>
				The width and height properties are calculated automatically depending on the content.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-block">
								<span class="demo-box__text">I'm the item with display: inline-block</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with short text</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-block">
								<span class="demo-box__text">I'm the item with display: inline-block with some text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding more text</span>	
				</div>
			</div>
			<p>
				If the content doesn't fit on one line then browsers will move it to a new line. In doing so the width property will be equal to the parent.
			</p>
			<p class="ha-screen-reader">The element has the multi-line text. The width is calculated depending on the width property of the parent. The height is calculated depending on the text.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-block">
								<span class="demo-box__text">I'm the item with display: inline-block element with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text</span>	
				</div>	
			</div>
			<p>
				<span class="page__point">2</span>
				If there is space, elements will be on the same line. Also the whitespace in the HTML code will create some gap.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-block">
								<span class="demo-box__text">I'm the item with display: inline-block #1</span>
							</span>
							<span class="demo-box display-inline-block">
								<span class="demo-box__text">I'm the item with display: inline-block #2</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items default position</span>	
				</div>
			</div>
			<p>
				If there isn't space,  browsers will move elements fully to a new line.
			</p>
			<p class="ha-screen-reader">There are three elements. The first two are displayed in full on the first line. The third element is displayed on the second line.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-block">
								<span class="demo-box__text">I'm the item with display: inline-block #1</span>
							</span>
							<span class="demo-box display-inline-block">
								<span class="demo-box__text">I'm the item with display: inline-block #2</span>
							</span>
							<span class="demo-box display-inline-block">
								<span class="demo-box__text">I'm the item with display: inline-block #3</span>
							</span>
							<span class="demo-box display-inline-block">    
								<span class="demo-box__text">I'm the item with display: inline-block #4</span>
							</span>
							<span class="demo-box display-inline-block">    
								<span class="demo-box__text">I'm the item with display: inline-block #5</span>
							</span>
							<span class="demo-box display-inline-block">    
								<span class="demo-box__text">I'm the item with display: inline-block #6</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">multiline position of the items with display: inline-block</span>
				</div>
			</div>
			<h3>Box model features</h3>
			<p>
				<span class="page__point">3</span>                
				We can set the width and height properties for elements.
			</p>
			<p class="ha-screen-reader">The element has the width and height properties with the 148px value. As a result a browser displays a square.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-block demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline-block</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the width and height properties are applied the item</span>
				</div>	
			</div>	
			<p>
				<span class="page__point">4</span>
				The padding, border and margin can be set and won't end up outside the parent in contrast to elements with display: inline.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items with display: inline</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-block is-padding">
								<span class="demo-box__text">I'm the item with display: inline-block #1</span>
							</span>
							<span class="demo-box display-inline-block is-padding">
								<span class="demo-box__text">I'm the item with display: inline-block #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items with display: inline-block</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items with display: inline</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-block is-border">
								<span class="demo-box__text">I'm the item with display: inline-block #1</span>
							</span>
							<span class="demo-box display-inline-block is-border">
								<span class="demo-box__text">I'm the item with display: inline-block #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items with display: inline-block</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items with display: inline</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-block is-margin">
								<span class="demo-box__text">I'm the item with display: inline-block #1</span>
							</span>
							<span class="demo-box display-inline-block is-margin">
								<span class="demo-box__text">I'm the item with display: inline-block #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items with display: inline-block</span>
				</div>
			</div>
		</section>
		<section id="flex-tab" aria-labelledby="flex" role="tabpanel" tabindex="0" class="page__content" aria-labelledby="flex-heading" hidden>
			<h2 id="flex-heading" class="ha-screen-reader">The flex value</h2>
			<h3>Default behavior</h3>
			<p>
				<span class="page__point">1</span>
				The width property fills up all available space by the text direction. The height property is calculated automatically depending on the content.
			</p>
			<p>
				If the element has display: block by default we won't see any changes after changing the block value on flex.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item after changing on display: flex</span>
				</div>
			</div>
			<p>
				And they happen for elements with display: inline. The width property stops depending on the content after the inline value on flex.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after changing on display: flex</span>
				</div>
			</div>
			<p>
				If the content doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent.
			</p>	
			<p>
				If we change the block value on flex then we won't see changes as with the width property.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: block with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after changing on display: flex</span>
				</div>
			</div>	
			<p>
				And if we change the inline value to flex the width property stops depending on the maximum line length.
			</p>
			<p class="ha-screen-reader">The element has the multi-line text. The height of the element is calculated depending on the text.</p>		
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after changing on display: flex</span>
				</div>
			</div>
			<p>
				<span class="page__point">2</span>
				By default elements are positioned in a column. So if we change the block value to flex elements will save its position.
			</p>
			<p class="ha-screen-reader">There are two elements with display flex. They are displayed below each other in a column.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the items before changing on display: flex</span>
				</div>		
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex #1</span>
							</div>
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items after changing on display: flex</span>
				</div>		
			</div>
			<p>
				And if we change the inline value to flex we will get they are positioned in a column.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items before changing on display: flex</span>
				</div>		
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex #1</span>
							</span>
							<span class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items after changing on display: flex</span>
				</div>		
			</div>
			<h3>Box model features</h3>
			<p>
				<span class="page__point">3</span>
				The width and height properties can be set to elements. Therefore we don't notice changes when changing the block value to flex. 
			</p>
			<p class="ha-screen-reader">The element has the width and height properties with the 148px value. As a result a browser displays a square.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before changing on display: flex</span>
				</div>		
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-flex demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: flex</span>
							</div>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after changing on display: flex</span>
				</div>		
			</div>			
			<p>The width and height properties start to apply after changing the inline value to flex.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before changing on display: flex</span>
				</div>		
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-flex demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: flex</span>
							</span>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after changing on display: flex</span>
				</div>		
			</div>			
			<p>
				<span class="page__point">4</span>
				The padding and border properties can be set for elements. If the element has display: block by default we won't see any changes after changing the block value on flex.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: block #1</span>
						</div>
						<div class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: block #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items before changing on display: flex</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box display-flex is-padding">
							<span class="demo-box__text">I'm the item with display: flex #1</span>
						</div>
						<div class="demo-box display-flex is-padding">
							<span class="demo-box__text">I'm the item with display: flex #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items after changing on display: flex</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: block #1</span>
						</div>
						<div class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: block #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">borders are applied to the items before changing on display: flex</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box display-flex is-border">
							<span class="demo-box__text">I'm the item with display: flex #1</span>
						</div>
						<div class="demo-box display-flex is-border">
							<span class="demo-box__text">I'm the item with display: flex #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">borders are applied to the items after changing on display: flex</span>
				</div>	
			</div>
			<p>
				And we'll see them after changing the inline value to flex because vertical paddings and borders stop ending up outside the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: inline #1</span>
						</span>
						<span class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: inline #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items before changing on display: flex</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box display-flex is-padding">
							<span class="demo-box__text">I'm the item with display: flex #1</span>
						</span>
						<span class="demo-box display-flex is-padding">
							<span class="demo-box__text">I'm the item with display: flex #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items after changing on display: flex</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: inline #1</span>
						</span>
						<span class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: inline #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">borders are applied to the items before changing on display: flex</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box display-flex is-border">
							<span class="demo-box__text">I'm the item with display: flex #1</span>
						</span>
						<span class="demo-box display-flex is-border">
							<span class="demo-box__text">I'm the item with display: flex #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">borders are applied to the items after changing on display: flex</span>
				</div>	
			</div>
			<p>
				Since vertical margins of elements with display: block might end up outside the parent, this behavior continues after changing the block value to flex. 
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin display-flex">
								<span class="demo-box__text">I'm the item with display: flex</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after changing on display: flex</span>
				</div>
			</div>
			<p>
				However, as with elements with display: block adding the border or padding properties to the parent stops this margins behavior.
			</p>         
			<p class="ha-screen-reader">There are the parent and child elements. I define the padding property for the parent and the margin property for the child. As a result margins stop to end up outside the parent. </p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box display-flex is-margin">
								<span class="demo-box__text">I'm the item with display: flex</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block</span>
								</div>																	
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box display-flex is-margin">
									<span class="demo-box__text">I'm the item with display: flex</span>
								</div>									
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<p>As with elements with display: block adding to the parent the overflow property with a value that's different from visible cancels margins behavior.</p>
			<p class="ha-screen-reader">There are the parent and child elements. I define the overflow property with the auto value for the parent and the margin property for the child. As a result margins stop to end up outside the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block</span>
								</div>																	
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when overflow: auto is applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box display-flex is-margin">
									<span class="demo-box__text">I'm the item with display: flex</span>
								</div>									
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when overflow: auto is applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<p>If the parent has a few elements with display: block top margins will end up outside it from the first element and the bottom from the last. Changing the block value to flex doesn't cancel that.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-flex is-margin">
								<span class="demo-box__text">I'm the item with display: flex #1</span>
							</div>
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item after changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item before changing on display: flex</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex #1</span>
							</div>
							<div class="demo-box display-flex is-margin">
								<span class="demo-box__text">I'm the item with display: flex #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item after changing on display: flex</span>
				</div>
			</div>
			<p>
				As with a single item case, adding the padding, border or overflow properties to the parent stops this behavior for elements too.
			</p>		
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item when paddings are applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box display-flex is-margin">
								<span class="demo-box__text">I'm the item with display: flex #1</span>
							</div>
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item when paddings are applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box display-flex is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item when paddings are applied to the parent before changing on display: flex</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex #1</span>
							</div>
							<div class="demo-box display-flex is-margin">
								<span class="demo-box__text">I'm the item with display: flex #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item when paddings are applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>																		
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item when borders are applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box display-flex is-margin">
									<span class="demo-box__text">I'm the item with display: flex #1</span>
								</div>
								<div class="demo-box display-flex">
									<span class="demo-box__text">I'm the item with display: flex #2</span>
								</div>										
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item when borders are applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box display-flex">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box display-flex is-margin">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item when borders are applied to the parent before changing on display: flex</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box display-flex">
									<span class="demo-box__text">I'm the item with display: flex #1</span>
								</div>
								<div class="demo-box display-flex is-margin">
									<span class="demo-box__text">I'm the item with display: flex #2</span>
								</div>										
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item when borders are applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>																		
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item when overflow: auto is applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box display-flex is-margin">
									<span class="demo-box__text">I'm the item with display: flex #1</span>
								</div>
								<div class="demo-box display-flex">
									<span class="demo-box__text">I'm the item with display: flex #2</span>
								</div>										
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item when overflow: auto is applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box display-flex">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box display-flex is-margin">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item when overflow: auto is applied to the parent before changing on display: flex</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box display-flex">
									<span class="demo-box__text">I'm the item with display: flex #1</span>
								</div>
								<div class="demo-box display-flex is-margin">
									<span class="demo-box__text">I'm the item with display: flex #2</span>
								</div>										
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item when overflow: auto is applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<p>
				Also, margins between adjacent elements continue collapsing when changing the block value to flex Also. The gap between elements will equal the largest.
			</p>		
			<p class="ha-screen-reader">There are the parent and two child elements. I define the margin property for two childs. As a result margins between child elements are overlapped each other.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex #1</span>
							</div>
							<div class="demo-box display-flex is-margin">
								<span class="demo-box__text">I'm the item with display: flex #2</span>
							</div>
							<div class="demo-box display-flex is-margin">
								<span class="demo-box__text">I'm the item with display: flex #3</span>
							</div>							
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after changing on display: flex</span>
				</div>
			</div>
			<p>And collapsing is saved after adding the padding, border and overflow properties. </p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex #1</span>
							</div>
							<div class="demo-box display-flex is-margin">
								<span class="demo-box__text">I'm the item with display: flex #2</span>
							</div>
							<div class="demo-box display-flex is-margin">
								<span class="demo-box__text">I'm the item with display: flex #3</span>
							</div>							
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the item with display: flex #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #3</span>
								</div>							
								<div class="demo-box">
									<span class="demo-box__text">I'm the item with display: block #4</span>
								</div>							
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box display-flex">
									<span class="demo-box__text">I'm the item with display: flex #1</span>
								</div>
								<div class="demo-box display-flex is-margin">
									<span class="demo-box__text">I'm the item with display: flex #2</span>
								</div>
								<div class="demo-box display-flex is-margin">
									<span class="demo-box__text">I'm the item with display: flex #3</span>
								</div>							
								<div class="demo-box display-flex">
									<span class="demo-box__text">I'm the item with display: flex #4</span>
								</div>							
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="oveflow-auto">
								<div class="demo-box">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #3</span>
								</div>							
								<div class="demo-box">
									<span class="demo-box__text">I'm the item with display: block #4</span>
								</div>							
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when oveflow: auto is applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="oveflow-auto">
								<div class="demo-box display-flex">
									<span class="demo-box__text">I'm the item with display: flex #1</span>
								</div>
								<div class="demo-box display-flex is-margin">
									<span class="demo-box__text">I'm the item with display: flex #2</span>
								</div>
								<div class="demo-box display-flex is-margin">
									<span class="demo-box__text">I'm the item with display: flex #3</span>
								</div>							
								<div class="demo-box display-flex">
									<span class="demo-box__text">I'm the item with display: flex #4</span>
								</div>							
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when oveflow: auto is applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<p>
				Since vertical margins of elements with display: inline might end up outside the parent, this behavior saves after changing the inline value to flex.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin display-flex">
								<span class="demo-box__text">I'm the item with display: flex #1</span>
							</span>
							<span class="demo-box is-margin display-flex">
								<span class="demo-box__text">I'm the item with display: flex #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<p>
				When changing the inline value to flex, margins don't overlap paddings or margins that are set to the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin display-flex" style="position: relative">
								<span class="demo-box__text">I'm the item with display: flex #1</span>
							</span>
							<span class="demo-box is-margin display-flex" style="position: relative">
								<span class="demo-box__text">I'm the item with display: flex #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #1</span>
								</span>
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #2</span>
								</span>						
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin display-flex" style="position: relative">
									<span class="demo-box__text">I'm the item with display: flex #1</span>
								</span>
								<span class="demo-box is-margin display-flex" style="position: relative">
									<span class="demo-box__text">I'm the item with display: flex #2</span>
								</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<p>
				Also, changing the inline value to flex leads margins again displays when the overflow is applied. The value should be different from the visible.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #1</span>
								</span>
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #2</span>
								</span>						
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when overflow: auto is applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<span class="demo-box is-margin display-flex" style="position: relative">
									<span class="demo-box__text">I'm the item with display: flex #1</span>
								</span>
								<span class="demo-box is-margin display-flex" style="position: relative">
									<span class="demo-box__text">I'm the item with display: flex #2</span>
								</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when overflow: auto is applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<p>
				When we change the inline to flex and the parent has multiline elements top margins will end up outside it for only the first element and bottom margins for the last.
			</p>
			<p>
				Margins from other elements stop overlapping siblings by vertical. They will be collapsed.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>							
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #4</span>
							</span>	
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #5</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #6</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #7</span>
							</span>	
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin display-flex">
								<span class="demo-box__text">I'm the item with display: flex #1</span>
							</span>
							<span class="demo-box is-margin display-flex">
								<span class="demo-box__text">I'm the item with display: flex #2</span>
							</span>
							<span class="demo-box is-margin display-flex">
								<span class="demo-box__text">I'm the item with display: flex #3</span>
							</span>							
							<span class="demo-box is-margin display-flex">
								<span class="demo-box__text">I'm the item with display: flex #4</span>
							</span>			
							<span class="demo-box is-margin display-flex">
								<span class="demo-box__text">I'm the item with display: flex #5</span>
							</span>
							<span class="demo-box is-margin display-flex">
								<span class="demo-box__text">I'm the item with display: flex #6</span>
							</span>
							<span class="demo-box is-margin display-flex">
								<span class="demo-box__text">I'm the item with display: flex #7</span>
							</span>	
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: flex</span>
				</div>
			</div>
			<p>
				If we define margin: auto to elements with display: block or display: inline that continues doesn't work after adding display: flex.
			</p>
			<p class="ha-screen-reader">There are the parent and child. I define margin auto for the child. It is displayed in the top left edge of the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto display-flex">
								<span class="demo-box__text">I'm the item with display: flex</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto display-flex">
								<span class="demo-box__text">I'm the item with display: flex</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after changing on display: flex</span>
				</div>
			</div>
			<p>
				Defining the width property to elements with display: block allows work of margins horizontal. That saves after changing the block value on grid.
			</p>
			<p class="ha-screen-reader">There are the parent and child. I define margin auto and width 375px for the child. It is displayed in the center of the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to it before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto display-flex" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: flex</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to it after changing on display: flex</span>
				</div>
			</div>
			<p>
				In addition, changing the inline value on flex allows using margin: auto if the width property is defined.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to it before changing on display: flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto display-flex" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: flex</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to it after changing on display: flex</span>
				</div>
			</div>
			<h3>Default behavior of flex items</h3>
			<div class="page__remark remark">
				<p>
					Note! Flex items are childs of the element with display: flex or display: inline-flex
				</p>
			</div>
			<p>
				<span class="page__point">5</span>
				Flex items always are blockified. It means all block values are saved.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the block value is saved</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the flex item with display: flex</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the flex value is saved</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the flex item with display: grid</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the grid value is saved</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box display-table">
								<span class="demo-box__text">I'm the flex item with display: table</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the table value is saved</span>
				</div>
			</div>
			<p>
				All inline values will be changed on block values. So the inline and inline-block values will be changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.
			</p>
			<div class="page__remark remark">
				<p>
					Note! Please, check the Computed tab on devTools to see how a browser changes a computed value for the display property
				</p>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline value is changed to the block value</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<span class="demo-box display-inline-block">
								<span class="demo-box__text">I'm the flex item with display: inline-block</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline value-block is changed to the block value</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<span class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the flex item with display: inline-flex</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline-flex value is changed to the flex value</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<span class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the flex item with display: inline-grid</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline-grid value is changed to the grid value</span>
				</div>				
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<span class="demo-box display-inline-table">
								<span class="demo-box__text">I'm the flex item with display: inline-table</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline-table value is changed to the table value</span>
				</div>				
			</div>
			<p>
				<span class="page__point">6</span>
				The width property of flex items depending on the flex-direction property. If flex-direction: row (default value) the width property is calculated automatically depending on the content. The height property tries to fill all space.
			</p>
			<p>
				Thus the width property stops to be equal to the width property of the parent for childs with display: block. It's calculated depending on the content. The height property stops depending on the content.
			</p>
			<p>
				It looks the same when the height property isn't defined to the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding display: flex and flex-direction: row to the parent </span>
				</div>
			</div>
			<p>
				In this case, if it's defined filling all space of the height property is more noticeable.
			</p>
			<p class="ha-screen-reader">There are the parent and child. I define height 150px for the parent. The child stretches to the full height of the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item when the height property is applied to the parent before adding display: flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex" style="height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item when the height property is applied to the parent after adding display: flex and flex-direction: row to it</span>
				</div>
			</div>
			<p>
				That behavior also works in the case of childs with display: inline. We easily see how the width property keeps depending on the content. We have to define the height property to the parent to see stretching of the height property.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding display: flex and flex-direction: row to the parent </span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item when the height property is applied to the parent before adding display: flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex" style="height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item when the height property is applied to the parent after adding display: flex and flex-direction: row to it</span>
				</div>
			</div>
			<p>
				When flex-direction: column the width property of flex items fills up all available space by the text direction. The height property is calculated automatically depending on the content.
			</p>
			<p>
				As a result, this behavior is the same as the behavior of childs with display: block.
			</p>
			<p class="ha-screen-reader">There are the parent and child. The child stretches to the full width of the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding display: flex and flex-direction: column to the parent </span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item when the height property is applied to the parent before adding display: flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column" style="height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item when the height property is applied to the parent after adding display: flex and flex-direction: column to it</span>
				</div>
			</div>
			<p>
				There are changes for childs with display: inline. The width property becomes to be equal to the width parent. The height property still works the same.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item when the height property is applied to the parent before adding display: flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column" style="height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item when the height property is applied to the parent after adding display: flex and flex-direction: column to it</span>
				</div>
			</div>
			<p>
				If the content of a flex item doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent. It doesn't matter that a value is set to the flex-direction property.
			</p>
			<p>
				As a result, the content of childs with display: block will be displayed the same after adding display: flex to its parent.
			</p>
			<p class="ha-screen-reader">The element has the multi-line text. The height of the element is calculated depending on the text.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				The width property of the childs with display: inline stops to be calculated depending on the maximum line length.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item display: inline with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				<span class="page__point">7</span>
				By default flex items position on the same line. If there isn't space, browsers will squeeze them depending on its content.
			</p>
			<p>
				For this reason childs with display: block stop positioning in a column. 
			</p>
			<p class="ha-screen-reader">There are the parent and three child elements. They are squeezed and displayed on the first line.</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #3 with some text</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4 with a loooooooooooong very loooooooooooong text </span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item some text #3</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #4 with a loooooooooooong very loooooooooooong text </span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<p>
				The single change for childs with display: inline is they are squeezed.
			</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #3 with some text</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #4 with a loooooooooooong very loooooooooooong text </span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item some text #3</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item #4 with a loooooooooooong very loooooooooooong text </span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<p>
				Also, a position might be changed using the flex-direction property. If we set the column value flex items will be stacked and stop squeeze.
			</p>
			<p>This behavior repeats for childs with display: block.</p>
			<p class="ha-screen-reader">There are the parent and three child elements. They are displayed below each other in a column.</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #3 with some text</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4 with a loooooooooooong very loooooooooooong text </span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item some text #3</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #4 with a loooooooooooong very loooooooooooong text </span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				In the case of childs with display: inline they stop to be on the same line and will display in a column.
			</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #3 with some text</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #4 with a loooooooooooong very loooooooooooong text </span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item some text #3</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item #4 with a loooooooooooong very loooooooooooong text </span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<h3>Box model features of flex items</h3>
			<p>
				<span class="page__point">8</span>
				The width and height properties can be set to flex items. It doesn't matter which the value is used for the flex-direction. 
			</p>
			<p>
				It's why we won't see some changes after changing the display property of the parent with the block value to flex.
			</p>
			<p class="ha-screen-reader">The element has the width and height properties with the 148px value. As a result a browser displays a square.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>					
						</div>
					</div>	
					<span class="page__demo-caption">the item the width and height properties are applied before adding display: flex and flex-direction: row to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the flex item</span>
							</div>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after adding display: flex and flex-direction: row to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before adding display: flex and flex-direction: column to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the flex item</span>
							</div>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after adding display: flex and flex-direction: column to the parent</span>
				</div>	
			</div>
			<p>When considering childs with display: inline we already can set the width and height properties after adding display: flex to the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before adding display: flex and flex-direction: row to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the flex item</span>
							</span>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after adding display: flex and flex-direction: row to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before adding display: flex and flex-direction: column to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the flex item</span>
							</span>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after adding display: flex and flex-direction: column to the parent</span>
				</div>	
			</div>
			<p>
				<span class="page__point">9</span>
				The padding and border properties can be set too. They will work without changes for childs with display: block.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>			
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				When it comes to childs with display: inline vertical paddings and borders stop ending up outside the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				Pay attention vertical margins don't end up outside the parent. That behavior doesn't depend on the flex-direction property. If we set the row or column value we will get an equal result.
			</p>
			<p>
				That leads to we'll see changes if we use childs with display: block.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				Vertical margins of childs with display: inline cease to end up outside the parent when adding display: flex to it.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				If the parent has two childs with display: block margins stop ending up outside it from the first child and the bottom from the last.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item before adding before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item before adding after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item before adding before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item before adding after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item before adding before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item before adding after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item before adding before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item before adding after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				In the case, we set margins for adjacent childs with display: block they stop collapsing.
			</p>			
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after adding display: flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-flex flex-direction-column">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after adding display: flex and flex-direction: column to the parent</span>
				</div>
			</div>

			<p>Also, margins cease to overlap paddings and borders.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin position-relative">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent before adding display: flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding display-flex">
							<span class="demo-box is-margin position-relative">
								<span class="demo-box__text">I'm the flex item</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent after adding display: flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin position-relative">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent before adding display: flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding display-flex flex-direction-column">
							<span class="demo-box is-margin position-relative">
								<span class="demo-box__text">I'm the flex item</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent after adding display: flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin position-relative">
									<span class="demo-box__text">I'm the item with display: inline</span>
								</span>																		
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent before adding display: flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">		
							<div class="parent-border display-flex">
								<span class="demo-box is-margin position-relative">
									<span class="demo-box__text">I'm the flex item</span>
								</span>																		
							</div>
						</div>
					</div>						
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent after adding display: flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin position-relative">
									<span class="demo-box__text">I'm the item with display: inline</span>
								</span>																		
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent before adding display: flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">		
							<div class="parent-border display-flex flex-direction-column">
								<span class="demo-box is-margin position-relative">
									<span class="demo-box__text">I'm the flex item</span>
								</span>																		
							</div>
						</div>
					</div>						
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent after adding display: flex and flex-direction: column to it</span>
				</div>
			</div>
			<p>
				When applying margin: auto the width and height properties of the childs are calculated depending on the content after adding display: flex to the parent. All space between the childs and the parent's borders will be shared evenly.
			</p>
			<p>
				We'll see the width property stops to be equal to the width property of the parent after changing the block value on flex. 
			</p>
			<p class="ha-screen-reader">There are the parent and child. I define margin auto for the child. It is displayed in the center of the parent by horizontal and vertical.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport"style="height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the height property is applied to the parent before adding display: flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-flex" style="height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the height property is applied to the parent after adding display: flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport"style="height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the height property is applied to the parent before adding display: flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-flex flex-direction-column" style="height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the height property is applied to the parent after adding display: flex and flex-direction: column to it</span>
				</div>
			</div>
			<p>
				The width and height properties keep behavior after changing the inline value on flex.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport"style="height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the height property is applied to the parent before adding display: flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-flex" style="height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the flex item</span>
							</span>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the height property is applied to the parent after adding display: flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport"style="height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the height property is applied to the parent before adding display: flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-flex flex-direction-column" style="height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the flex item</span>
							</span>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the height property is applied to the parent after adding display: flex and flex-direction: column to it</span>
				</div>
			</div>
			<p>
				Adding margin: auto to flex items stops filling all space of the height property when flex-direction: row. In the case with flex-direction: column  — the width property.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-flex"style="height: 150px">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">the item when display: flex and flex-direction: row with the height property are applied to the parent before adding margin: auto</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-flex" style="height: 150px">
							<div class="demo-box is-margin-auto display-flex">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">the item when display: flex and flex-direction: row with the height property are applied to the parent after adding margin: auto</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-flex flex-direction-column"style="height: 150px">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">the item when display: flex and flex-direction: column with the height propertyare applied to the parent before adding margin: auto</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-flex" style="height: 150px">
							<div class="demo-box is-margin-auto display-flex flex-direction-column">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">the item when display: flex and flex-direction: column with the height property  are applied to the parent after adding margin: auto</span>
				</div>
			</div>
		</section>
		<section id="inline-flex-tab" aria-labelledby="inline-flex" role="tabpanel" tabindex="0" class="page__content" aria-labelledby="inline-flex-heading" hidden>
			<h2 id="inline-flex-heading" class="ha-screen-reader">The inline-flex value</h2>
			<h3>Default behavior</h3>
			<p>
				<span class="page__point">1</span>
				The width and height property of elements calculate depending on the content.
			</p>
			<p>
				If the element has display: block by default we'll see the width property stops to fill up all available space by the text direction after changing the block value on flex.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item after changing on display: inline-flex</span>
				</div>
			</div>
			<p>
				In turn, changing the inline value on flex won't lead to changes.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after changing on display: inline-flex</span>
				</div>
			</div>
			<p>
				If the content of elements doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent.
			</p>	
			<p>
				If we change the block value on flex then we won't see changes.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: block with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after changing on display: inline-flex</span>
				</div>
			</div>	
			<p>
				And if we change the inline value to inline-flex the width property stops depending on the maximum line length.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after changing on display: inline-flex</span>
				</div>
			</div>
			<p>
				<span class="page__point">2</span>
				By default elements are lining up. Also, a gap will be created between them.
			</p>
			<p>
				So if we change the block value to inline-flex the elements' position will be changed.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the items before changing on display: inline-flex</span>
				</div>		
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
							</div>
							<div class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items after changing on display: inline-flex</span>
				</div>		
			</div>
			<p>
				When we change the inline value to inline-flex elements will keep lining up. 
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items before changing on display: inline-flex</span>
				</div>		
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
							</span>
							<span class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items after changing on display: inline-flex</span>
				</div>		
			</div>
			<p>
				If elements can't fit on the line they will fully move to a new line in contrast to elements with display: inline.
			</p>
			<p class="ha-screen-reader">There are three elements. The first two are displayed in full on the first line. The third element is displayed on the second line.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #4</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items before changing on display: inline-flex</span>
				</div>		
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
							</span>
							<span class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
							</span>
							<span class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
							</span>
							<span class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items after changing on display: inline-flex</span>
				</div>		
			</div>
			<h3>Box model features</h3>
			<p>
				<span class="page__point">3</span>
				The width and height properties can be set to elements. Therefore we don't notice changes when changing the block value to inline-flex. 
			</p>
			<p class="ha-screen-reader">The element has the width and height properties with the 148px value. As a result a browser displays a square.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before changing on display: inline-flex</span>
				</div>		
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-flex demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline-flex</span>
							</div>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after changing on display: inline-flex</span>
				</div>		
			</div>			
			<p>The width and height properties start to apply after changing the inline value to inline-flex.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before changing on display: inline-flex</span>
				</div>		
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-flex demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline-flex</span>
							</span>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after changing on display: inline-flex</span>
				</div>		
			</div>			
			<p>
				<span class="page__point">4</span>
				The padding and border properties can be set for elements. 
			</p>
			<p>
				If the element has display: block by default we won't see any changes after changing the block value on flex.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: block #1</span>
						</div>
						<div class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: block #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items before changing on display: inline-flex</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box display-inline-flex is-padding">
							<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
						</div>
						<div class="demo-box display-inline-flex is-padding">
							<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items after changing on display: inline-flex</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: block #1</span>
						</div>
						<div class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: block #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">borders are applied to the items before changing on display: inline-flex</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box display-inline-flex is-border">
							<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
						</div>
						<div class="demo-box display-inline-flex is-border">
							<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">borders are applied to the items after changing on display: inline-flex</span>
				</div>	
			</div>
			<p>
				And we'll see them after changing the inline value to inline-flex because vertical paddings and borders stop ending up outside the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: inline #1</span>
						</span>
						<span class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: inline #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items before changing on display: inline-flex</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box display-inline-flex is-padding">
							<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
						</span>
						<span class="demo-box display-inline-flex is-padding">
							<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items after changing on display: inline-flex</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: inline #1</span>
						</span>
						<span class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: inline #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">borders are applied to the items before changing on display: inline-flex</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box display-inline-flex is-border">
							<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
						</span>
						<span class="demo-box display-inline-flex is-border">
							<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">borders are applied to the items after changing on display: inline-flex</span>
				</div>	
			</div>
			<p>
				Since vertical margins of elements with display: block might end up outside the parent, this behavior stops after changing the block value to inline-flex. 
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after changing on display: inline-flex</span>
				</div>
			</div>
			<p>
				If the parent has a few elements with display: block top margins will end up outside it from the first element and the bottom from the last. 
			</p>
			<p>
				When changing the block value to inline-flex this behavior cancels. Also, elements without margins can have gaps. 
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-flex is-margin">
								<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
							</div>
							<div class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item after changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item before changing on display: inline-flex</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
							</div>
							<div class="demo-box display-inline-flex is-margin">
								<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item after changing on display: inline-flex</span>
				</div>
			</div>
			<p>
				Also, margins between adjacent elements stop collapsing after changing the block value to inline-flex.
			</p>		
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
							</div>
							<div class="demo-box display-inline-flex is-margin">
								<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
							</div>
							<div class="demo-box display-inline-flex is-margin">
								<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
							</div>							
							<div class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after changing on display: inline-flex</span>
				</div>
			</div>
			<p>
				Vertical margins of elements with display: inline don't end up outside the parent anymore after changing the inline value to inline-flex.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
							</span>
							<span class="demo-box is-margin display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: inline-flex</span>
				</div>
			</div>
			<p>
				Also, they already don't overlap paddings or margins that are set to the parent after changing the inline value to inline-flex.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin display-inline-flex" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
							</span>
							<span class="demo-box is-margin display-inline-flex" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #1</span>
								</span>
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #2</span>
								</span>						
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin display-inline-flex" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
								</span>
								<span class="demo-box is-margin display-inline-flex" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
								</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent after changing on display: inline-flex</span>
				</div>
			</div>
			<p>
				Plus, changing the inline value to inline-flex leads margins again displays when the overflow is applied. The value should be different from the visible.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #1</span>
								</span>
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #2</span>
								</span>						
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when overflow: auto is applied to the parent before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<span class="demo-box is-margin display-inline-flex" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
								</span>
								<span class="demo-box is-margin display-inline-flex" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
								</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when overflow: auto is applied to the parent after changing on display: inline-flex</span>
				</div>
			</div>
			<p>
				Margins stop to end outside the parent and overlap each other after changing the inline value to inline-flex.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>							
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #4</span>
							</span>	
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #5</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #6</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #7</span>
							</span>	
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #1</span>
							</span>
							<span class="demo-box is-margin display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #2</span>
							</span>
							<span class="demo-box is-margin display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #3</span>
							</span>							
							<span class="demo-box is-margin display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #4</span>
							</span>			
							<span class="demo-box is-margin display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #5</span>
							</span>
							<span class="demo-box is-margin display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #6</span>
							</span>
							<span class="demo-box is-margin display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex #7</span>
							</span>	
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: inline-flex</span>
				</div>
			</div>
			<p>
				If we define margin: auto to elements with display: block or display: inline that continues doesn't work after adding display: inline-flex.
			</p>
			<p class="ha-screen-reader">There are the parent and child. I define margin auto for the child. It is displayed in the top left corner of the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto display-inline-flex">
								<span class="demo-box__text">I'm the item with display: inline-flex</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after changing on display: inline-flex</span>
				</div>
			</div>
			<p>
				It doesn't work even if the width property is defined.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to them before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto display-inline-flex" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: inline-flex</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to them after changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to them before changing on display: inline-flex</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto display-inline-flex" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: inline-flex</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to them after changing on display: inline-flex</span>
				</div>
			</div>
			<h3>Default behavior of flex items</h3>
			<div class="page__remark remark">
				<p>
					Note! Flex items are childs of the element with display: inline-flex or display: inline-flex
				</p>
			</div>
			<p>
				<span class="page__point">5</span>
				Flex items always are blockified. It means all block values are saved.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the block value is saved</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the flex item with display: flex</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the flex value is saved</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the flex item with display: grid</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the grid value is saved</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box display-table">
								<span class="demo-box__text">I'm the flex item with display: table</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the table value is saved</span>
				</div>
			</div>
			<p>
				All inline values will be changed on block values. So the inline and inline-block values will be changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.
			</p>
			<div class="page__remark remark">
				<p>
					Note! Please, check the Computed tab on devTools to see how a browser changes a computed value for the display property
				</p>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline value is changed to the block value</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<span class="demo-box display-inline-block">
								<span class="demo-box__text">I'm the flex item with display: inline-block</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline value-block is changed to the block value</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<span class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the flex item with display: inline-flex</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline-flex value is changed to the flex value</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<span class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the flex item with display: inline-grid</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline-grid value is changed to the grid value</span>
				</div>				
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<span class="demo-box display-inline-table">
								<span class="demo-box__text">I'm the flex item with display: inline-table</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline-table value is changed to the table value</span>
				</div>				
			</div>
			<p>
				<span class="page__point">6</span>
				The width property of flex items depending on the flex-direction property. If flex-direction: row (default value) the width property is calculated automatically depending on the content. The height property tries to fill all space.
			</p>
			<p>
				If we don't define the width property to the parent that behavior is implicit. It will be more obvious when defining the width property. The height property stops depending on the content. 
			</p>
			<p>	
				It looks the same like before in the case with no defined height property to the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding display: inline-flex and flex-direction: row to the parent </span>
				</div>
			</div>
			<p>
				In this case, if it's defined filling all space of the height property is more noticeable.
			</p>
			<p class="ha-screen-reader">There are the parent and child. I define height 150px for the parent. The child stretches to the full height of the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="width: 50%; height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item when the width and height properties are applied to the parent before adding display: inline-flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex" style="width: 50%; height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item when the width and height properties are applied to the parent after adding display: inline-flex and flex-direction: row to it</span>
				</div>
			</div>
			<p>
				That behavior also works in the case of childs with display: inline. We have to define the width and height properties to the parent to see how the width depends on the content and the height property stretches.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding display: inline-flex and flex-direction: row to the parent </span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="width: 50%; height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item when the width and height properties are applied to the parent before adding display: inline-flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex" style="width: 50%; height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item when the width and height properties are applied to the parent after adding display: inline-flex and flex-direction: row to it</span>
				</div>
			</div>
			<p>
				When flex-direction: column the width property of flex items fills up all available space by the text direction and the height property is calculated automatically depending on the content.
			</p>
			<p>
				As a result, this behavior is the same as the behavior of elements with display: block. It's more noticeable when defining the width property to the parent.
			</p>
			<p class="ha-screen-reader">There are the parent and child. The child stretches to the full width of the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding display: inline-flex and flex-direction: column to the parent </span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="width: 50%; height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied to the parent before adding display: inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column" style="width: 50%; height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied to the parent after adding display: inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<p>
				The width property of childs with display: inline is equal to the parent width property. As in the case with childs with display: block this behavior more clearly after defining the width property to the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="width: 50%; height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied to the parent before adding display: inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column" style="width: 50%; height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied to the parent after adding display: inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<p>
				If the content of a flex item doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent. It doesn't matter that a value is set to the flex-direction property.
			</p>
			<p>
				As a result, the content of elements with display: block will be displayed the same after adding display: inline-flex to its parent.
			</p>
			<p class="ha-screen-reader">The element has the multi-line text. The height of the element is calculated depending on the text.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				The width property of the element with display: inline stops to be calculated depending on the maximum line length.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item display: inline with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				<span class="page__point">7</span>
				By default flex items position on the same line. If there isn't space, browsers will squeeze them depending on its content.
			</p>
			<p>
				For this reason elements with display: block stop positioning in a column. 
			</p>
			<p class="ha-screen-reader">There are the parent and three child elements. They are squeezed and displayed on the first line.</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #3 with some text</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4 with a loooooooooooong very loooooooooooong text </span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item some text #3</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #4 with a loooooooooooong very loooooooooooong text </span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<p>
				The single change for elements with display: inline is they are squeezed.
			</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #3 with some text</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #4 with a loooooooooooong very loooooooooooong text </span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item some text #3</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item #4 with a loooooooooooong very loooooooooooong text </span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<p>
				Also, a position might be changed using the flex-direction property. If we set the column value flex items will be stacked and stop squeeze.
			</p>
			<p>This behavior repeats for elements with display: block.</p>
			<p class="ha-screen-reader">There are the parent and three child elements. They are displayed below each other in a column.</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #3 with some text</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4 with a loooooooooooong very loooooooooooong text </span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item some text #3</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #4 with a loooooooooooong very loooooooooooong text </span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				In the case of elements with display: inline they stop to be on the same line and will display in a column.
			</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #3 with some text</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #4 with a loooooooooooong very loooooooooooong text </span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item some text #3</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the flex item #4 with a loooooooooooong very loooooooooooong text </span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<h3>Box model features of flex items</h3>
			<p>
				<span class="page__point">8</span>
				The width and height properties can be set to inline-flex items. It doesn't matter which the value is used for the flex-direction. 
			</p>
			<p>
				It's why we won't see some changes after becoming the element with display: block to a flex item.
			</p>
			<p class="ha-screen-reader">The element has the width and height properties with the 148px value. As a result a browser displays a square.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>					
						</div>
					</div>	
					<span class="page__demo-caption">the item the width and height properties are applied before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the flex item</span>
							</div>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the flex item</span>
							</div>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>	
			</div>
			<p>When it comes to elements with display: inline we already can set the width and height properties after adding display: inline-flex to the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the flex item</span>
							</span>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the flex item</span>
							</span>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>	
			</div>
			<p>
				<span class="page__point">9</span>
				The padding and border properties can be set too. They will work without changes for elements with display: block.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				When it comes to elements with display: inline vertical paddings and borders stop ending up outside the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the flex item #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>			
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the flex item #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				Pay attention vertical margins don't end up outside the parent. That behavior doesn't depend on the flex-direction property. If we set the row or column value we will get an equal result.
			</p>
			<p>
				That leads to we'll see changes if we use elements with display: block.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				Also, that applies to elements with display: inline.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				If the parent has two elements with display: block margins stop ending up outside it from the first element and the bottom from the last.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>
				In the case, we set margins for adjacent elements with display: block they stop collapsing.
			</p>			
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after adding display: inline-flex and flex-direction: row to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex flex-direction-column">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the flex item #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after adding display: inline-flex and flex-direction: column to the parent</span>
				</div>
			</div>
			<p>Also, margins cease to overlap paddings and borders.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin position-relative">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent before adding display: inline-flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding display-inline-flex">
							<span class="demo-box is-margin position-relative">
								<span class="demo-box__text">I'm the flex item</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent after adding display: inline-flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin position-relative">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent before adding display: inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding display-inline-flex flex-direction-column">
							<span class="demo-box is-margin position-relative">
								<span class="demo-box__text">I'm the flex item</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent after adding display: inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin position-relative">
									<span class="demo-box__text">I'm the item with display: inline</span>
								</span>																		
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent before adding display: inline-flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">		
							<div class="parent-border display-inline-flex">
								<span class="demo-box is-margin position-relative">
									<span class="demo-box__text">I'm the flex item</span>
								</span>																		
							</div>
						</div>
					</div>						
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent after adding display: inline-flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin position-relative">
									<span class="demo-box__text">I'm the item with display: inline</span>
								</span>																		
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent before adding display: inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">		
							<div class="parent-border display-inline-flex flex-direction-column">
								<span class="demo-box is-margin position-relative">
									<span class="demo-box__text">I'm the flex item</span>
								</span>																		
							</div>
						</div>
					</div>						
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent after adding display: inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<p>
				When applying margin: auto the width and height properties of the childs are calculated depending on the content after adding display: inline-flex to the parent. All space between the childs and the parent's borders will be shared evenly.
			</p>
			<p>
				We'll see the width property stops to be equal to the width property of the parent after changing the block value on flex. 
			</p>
			<p class="ha-screen-reader">There are the parent and child. I define margin auto for the child. It is displayed in the center of the parent by horizontal and vertical.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport"style="width: 50%; height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the width and height properties are applied to the parent before adding display: inline-flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-inline-flex" style="width: 50%; height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the width and height properties are applied to the parent after adding display: inline-flex and flex-direction: row to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport"style="width: 50%; height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the width and height properties are applied to the parent before adding display: inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-inline-flex flex-direction-column" style="width: 50%; height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the width and height properties are applied to the parent after adding display: inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<p>
				The width and height properties keep behavior after changing the inline value on flex.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport" style="width: 50%; height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the width and height properties are applied to the parent before adding inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-inline-flex" style="width: 50%; height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the flex item</span>
							</span>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the width and height properties are applied to the parent after adding inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport"style="width: 50%; height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the width and height properties are applied to the parent before adding inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-inline-flex flex-direction-column" style="width: 50%;  height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the flex item</span>
							</span>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the width and height properties are applied to the parent after adding display: inline-flex and flex-direction: column to it</span>
				</div>
			</div>
			<p>
				Adding margin: auto to flex items stops filling all space of the height property when flex-direction: row. In the case with flex-direction: column  — the width property.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-inline-flex" style="width: 50%; height: 150px">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">the item when display: inline-flex and flex-direction: row with the width and height properties are applied to the parent before adding margin: auto</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-inline-flex" style="width: 50%; height: 150px">
							<div class="demo-box is-margin-auto display-inline-flex">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">the item when display: inline-flex and flex-direction: row with the width and height properties are applied to the parent after adding margin: auto</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-inline-flex flex-direction-column" style="width: 50%; height: 150px">
							<div class="demo-box">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">the item when display: inline-flex and flex-direction: column with the width and height properties are applied to the parent before adding margin: auto</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-inline-flex" style="width: 50%; height: 150px">
							<div class="demo-box is-margin-auto display-inline-flex flex-direction-column">
								<span class="demo-box__text">I'm the flex item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">the item when display: inline-flex and flex-direction: column with the width and height properties are applied to the parent after adding margin: auto</span>
				</div>
			</div>
		</section>
		<section id="grid-tab" aria-labelledby="grid" role="tabpanel" tabindex="0" class="page__content" aria-labelledby="grid-heading" hidden>
			<h2 id="grid-heading" class="ha-screen-reader">The grid value</h2>
			<h3>Default behavior</h3>
			<p>
				<span class="page__point">1</span>
				The the width property of elements with display: grid fills up all available space by the text direction. The height property is calculated automatically depending on the content.
			</p>
			<p>
				If the element has display: block by default we won't see any changes after changing the block value on grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item after changing on display: grid</span>
				</div>
			</div>
			<p>
				And they happen for elements with display: inline. The width property stops depending on the content after the inline value on grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after changing on display: grid</span>
				</div>
			</div>
			<p>
				If the content of elements with display: grid doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent.
			</p>	
			<p>
				If we change the block value on grid then we won't see changes as with the width property.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: block with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after changing on display: grid</span>
				</div>
			</div>	
			<p>
				And if we change the inline value to grid the width property stops depending on the maximum line length.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after changing on display: grid</span>
				</div>
			</div>
			<p>
				<span class="page__point">2</span>
				By default elements with display: grid are positioned in a column. So if we change the block value to grid elements will save its position.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the items before changing on display: grid</span>
				</div>		
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid #1</span>
							</div>
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items after changing on display: grid</span>
				</div>		
			</div>
			<p>
				And if we change the inline value to grid we will get they are positioned in a column.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items before changing on display: grid</span>
				</div>		
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid #1</span>
							</span>
							<span class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items after changing on display: grid</span>
				</div>		
			</div>
			<h3>Box model features</h3>
			<p>
				<span class="page__point">3</span>
				The width and height properties can be set to elements with display: grid. Therefore we don't notice changes when changing the block value to grid. 
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before changing on display: grid</span>
				</div>		
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-grid demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: grid</span>
							</div>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after changing on display: grid</span>
				</div>		
			</div>			
			<p>The width and height properties start to apply after changing the inline value to grid.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before changing on display: grid</span>
				</div>		
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-grid demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: grid</span>
							</span>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after changing on display: grid</span>
				</div>		
			</div>			
			<p>
				<span class="page__point">4</span>
				The padding and border properties can be set for elements with display: grid. If the element has display: block by default we won't see any changes after changing the block value on grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: block #1</span>
						</div>
						<div class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: block #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items before changing on display: grid</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box display-grid is-padding">
							<span class="demo-box__text">I'm the item with display: grid #1</span>
						</div>
						<div class="demo-box display-grid is-padding">
							<span class="demo-box__text">I'm the item with display: grid #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items after changing on display: grid</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: block #1</span>
						</div>
						<div class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: block #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">borders are applied to the items before changing on display: grid</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box display-grid is-border">
							<span class="demo-box__text">I'm the item with display: grid #1</span>
						</div>
						<div class="demo-box display-grid is-border">
							<span class="demo-box__text">I'm the item with display: grid #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">borders are applied to the items after changing on display: grid</span>
				</div>	
			</div>
			<p>
				And we'll see them after changing the inline value to grid because vertical paddings and borders stop ending up outside the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: inline #1</span>
						</span>
						<span class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: inline #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items before changing on display: grid</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box display-grid is-padding">
							<span class="demo-box__text">I'm the item with display: grid #1</span>
						</span>
						<span class="demo-box display-grid is-padding">
							<span class="demo-box__text">I'm the item with display: grid #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items after changing on display: grid</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: inline #1</span>
						</span>
						<span class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: inline #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">borders are applied to the items before changing on display: grid</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box display-grid is-border">
							<span class="demo-box__text">I'm the item with display: grid #1</span>
						</span>
						<span class="demo-box display-grid is-border">
							<span class="demo-box__text">I'm the item with display: grid #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">borders are applied to the items after changing on display: grid</span>
				</div>	
			</div>
			<p>
				Since vertical margins of elements with display: block might end up outside the parent, this behavior continues after changing the block value to grid. 
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin display-grid">
								<span class="demo-box__text">I'm the item with display: grid</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after changing on display: grid</span>
				</div>
			</div>
			<p>
				However, as with elements with display: block adding the border or padding properties to the parent stops this margins behavior.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box display-grid is-margin">
								<span class="demo-box__text">I'm the item with display: grid</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block</span>
								</div>																	
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box display-grid is-margin">
									<span class="demo-box__text">I'm the item with display: grid</span>
								</div>									
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<p>As with elements with display: block adding to the parent the overflow property with a value that's different from visible cancels margins behavior.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block</span>
								</div>																	
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when overflow: auto is applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box display-grid is-margin">
									<span class="demo-box__text">I'm the item with display: grid</span>
								</div>									
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when overflow: auto is applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<p>If the parent has a few elements with display: block top margins will end up outside it from the first element and the bottom from the last. Changing the block value to grid doesn't cancel that.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-grid is-margin">
								<span class="demo-box__text">I'm the item with display: grid #1</span>
							</div>
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item after changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item before changing on display: grid</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid #1</span>
							</div>
							<div class="demo-box display-grid is-margin">
								<span class="demo-box__text">I'm the item with display: grid #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item after changing on display: grid</span>
				</div>
			</div>
			<p>
				As with a single item case, adding the padding, border or overflow properties to the parent stops this behavior for elements with display: grid too.
			</p>		
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item when paddings are applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box display-grid is-margin">
								<span class="demo-box__text">I'm the item with display: grid #1</span>
							</div>
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item when paddings are applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box display-grid is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item when paddings are applied to the parent before changing on display: grid</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid #1</span>
							</div>
							<div class="demo-box display-grid is-margin">
								<span class="demo-box__text">I'm the item with display: grid #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item when paddings are applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>																		
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item when borders are applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box display-grid is-margin">
									<span class="demo-box__text">I'm the item with display: grid #1</span>
								</div>
								<div class="demo-box display-grid">
									<span class="demo-box__text">I'm the item with display: grid #2</span>
								</div>										
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item when borders are applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box display-grid">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box display-grid is-margin">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item when borders are applied to the parent before changing on display: grid</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box display-grid">
									<span class="demo-box__text">I'm the item with display: grid #1</span>
								</div>
								<div class="demo-box display-grid is-margin">
									<span class="demo-box__text">I'm the item with display: grid #2</span>
								</div>										
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item when borders are applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>																		
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item when overflow: auto is applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box display-grid is-margin">
									<span class="demo-box__text">I'm the item with display: grid #1</span>
								</div>
								<div class="demo-box display-grid">
									<span class="demo-box__text">I'm the item with display: grid #2</span>
								</div>										
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item when overflow: auto is applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box display-grid">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box display-grid is-margin">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item when overflow: auto is applied to the parent before changing on display: grid</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<div class="demo-box display-grid">
									<span class="demo-box__text">I'm the item with display: grid #1</span>
								</div>
								<div class="demo-box display-grid is-margin">
									<span class="demo-box__text">I'm the item with display: grid #2</span>
								</div>										
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item when overflow: auto is applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<p>
				Also, margins between adjacent elements continue collapsing when changing the block value to grid Also. The gap between elements will equal the largest.
			</p>		
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid #1</span>
							</div>
							<div class="demo-box display-grid is-margin">
								<span class="demo-box__text">I'm the item with display: grid #2</span>
							</div>
							<div class="demo-box display-grid is-margin">
								<span class="demo-box__text">I'm the item with display: grid #3</span>
							</div>							
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after changing on display: grid</span>
				</div>
			</div>
			<p>And collapsing is saved after adding the padding, border and overflow properties. </p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid #1</span>
							</div>
							<div class="demo-box display-grid is-margin">
								<span class="demo-box__text">I'm the item with display: grid #2</span>
							</div>
							<div class="demo-box display-grid is-margin">
								<span class="demo-box__text">I'm the item with display: grid #3</span>
							</div>							
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the item with display: grid #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #3</span>
								</div>							
								<div class="demo-box">
									<span class="demo-box__text">I'm the item with display: block #4</span>
								</div>							
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<div class="demo-box display-grid">
									<span class="demo-box__text">I'm the item with display: grid #1</span>
								</div>
								<div class="demo-box display-grid is-margin">
									<span class="demo-box__text">I'm the item with display: grid #2</span>
								</div>
								<div class="demo-box display-grid is-margin">
									<span class="demo-box__text">I'm the item with display: grid #3</span>
								</div>							
								<div class="demo-box display-grid">
									<span class="demo-box__text">I'm the item with display: grid #4</span>
								</div>							
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="oveflow-auto">
								<div class="demo-box">
									<span class="demo-box__text">I'm the item with display: block #1</span>
								</div>
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #2</span>
								</div>
								<div class="demo-box is-margin">
									<span class="demo-box__text">I'm the item with display: block #3</span>
								</div>							
								<div class="demo-box">
									<span class="demo-box__text">I'm the item with display: block #4</span>
								</div>							
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when oveflow: auto is applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="oveflow-auto">
								<div class="demo-box display-grid">
									<span class="demo-box__text">I'm the item with display: grid #1</span>
								</div>
								<div class="demo-box display-grid is-margin">
									<span class="demo-box__text">I'm the item with display: grid #2</span>
								</div>
								<div class="demo-box display-grid is-margin">
									<span class="demo-box__text">I'm the item with display: grid #3</span>
								</div>							
								<div class="demo-box display-grid">
									<span class="demo-box__text">I'm the item with display: grid #4</span>
								</div>							
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when oveflow: auto is applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<p>
				Since vertical margins of elements with display: inline might end up outside the parent, this behavior saves after changing the inline value to grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin display-grid">
								<span class="demo-box__text">I'm the item with display: grid #1</span>
							</span>
							<span class="demo-box is-margin display-grid">
								<span class="demo-box__text">I'm the item with display: grid #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<p>
				When changing the inline value to grid, margins don't overlap paddings or margins that are set to the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin display-grid" style="position: relative">
								<span class="demo-box__text">I'm the item with display: grid #1</span>
							</span>
							<span class="demo-box is-margin display-grid" style="position: relative">
								<span class="demo-box__text">I'm the item with display: grid #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #1</span>
								</span>
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #2</span>
								</span>						
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin display-grid" style="position: relative">
									<span class="demo-box__text">I'm the item with display: grid #1</span>
								</span>
								<span class="demo-box is-margin display-grid" style="position: relative">
									<span class="demo-box__text">I'm the item with display: grid #2</span>
								</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<p>
				Also, changing the inline value to grid leads margins again displays when the overflow is applied. The value should be different from the visible.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #1</span>
								</span>
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #2</span>
								</span>						
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when overflow: auto is applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<span class="demo-box is-margin display-grid" style="position: relative">
									<span class="demo-box__text">I'm the item with display: grid #1</span>
								</span>
								<span class="demo-box is-margin display-grid" style="position: relative">
									<span class="demo-box__text">I'm the item with display: grid #2</span>
								</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when overflow: auto is applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<p>
				When we change the inline to grid and the parent has multiline elements top margins will end up outside it for only the first element and bottom margins for the last.
			</p>
			<p>
				Margins from other elements stop overlapping siblings by vertical. They will be collapsed.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>							
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #4</span>
							</span>	
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #5</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #6</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #7</span>
							</span>	
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin display-grid">
								<span class="demo-box__text">I'm the item with display: grid #1</span>
							</span>
							<span class="demo-box is-margin display-grid">
								<span class="demo-box__text">I'm the item with display: grid #2</span>
							</span>
							<span class="demo-box is-margin display-grid">
								<span class="demo-box__text">I'm the item with display: grid #3</span>
							</span>							
							<span class="demo-box is-margin display-grid">
								<span class="demo-box__text">I'm the item with display: grid #4</span>
							</span>			
							<span class="demo-box is-margin display-grid">
								<span class="demo-box__text">I'm the item with display: grid #5</span>
							</span>
							<span class="demo-box is-margin display-grid">
								<span class="demo-box__text">I'm the item with display: grid #6</span>
							</span>
							<span class="demo-box is-margin display-grid">
								<span class="demo-box__text">I'm the item with display: grid #7</span>
							</span>	
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: grid</span>
				</div>
			</div>
			<p>
				If we define margin: auto to elements with display: block or display: inline that continues doesn't work after adding display: grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto display-grid">
								<span class="demo-box__text">I'm the item with display: grid</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto display-grid">
								<span class="demo-box__text">I'm the item with display: grid</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after changing on display: grid</span>
				</div>
			</div>
			<p>
				Defining the width property to elements with display: block allows work of margins horizontal. That saves after changing the block value on grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to it before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto display-grid" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: grid</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to it after changing on display: grid</span>
				</div>
			</div>
			<p>
				In addition, changing the inline value on grid allows using margin: auto if the width property is defined.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to it before changing on display: grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto display-grid" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: grid</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to it after changing on display: grid</span>
				</div>
			</div>
			<h3>Default behavior of grid items</h3>
			<div class="page__remark remark">
				<p>
					Note! grid items are childs of the element with display: grid or display: inline-grid
				</p>
			</div>
			<p>
				<span class="page__point">5</span>
				Grid items always are blockified. It means all block values are saved.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the block value is saved</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box display-flex">
								<span class="demo-box__text">I'm the grid item with display: flex</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the flex value is saved</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the grid item with display: grid</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the grid value is saved</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box display-table">
								<span class="demo-box__text">I'm the grid item with display: table</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the table value is saved</span>
				</div>
			</div>
			<p>
				All inline values will be changed on block values. So the inline and inline-block values will be changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.
			</p>
			<div class="page__remark remark">
				<p>
					Note! Please, check the Computed tab on devTools to see how a browser changes a computed value for the display property
				</p>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline value is changed to the block value</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box display-inline-block">
								<span class="demo-box__text">I'm the grid item with display: inline-block</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline value-block is changed to the block value</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the grid item with display: inline-flex</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline-flex value is changed to the flex value</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the grid item with display: inline-grid</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline-grid value is changed to the grid value</span>
				</div>				
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box display-inline-table">
								<span class="demo-box__text">I'm the grid item with display: inline-table</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline-table value is changed to the table value</span>
				</div>				
			</div>
			<p>
				<span class="page__point">6</span>
				The width property of grid items is equal to the width property of the parent. The height property tries to fill all space.
			</p>
			<p>
				Thus the width property keeps being equal to the width property of the parent for childs with display: block. The height property stops depending on the content but looks the same when the height property isn't defined to the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #3</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: grid to the parent</span>
				</div>
			</div>
			<p>
				In this case, if it's defined filling all space of the height property is more noticeable.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item when the height property is applied to the parent before adding display: grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid" style="height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item when the height property is applied to the parent after adding display: grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the items when the height property is applied to the parent before adding display: grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid" style="height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #3</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the items when the height property is applied to the parent after adding display: grid to it</span>
				</div>
			</div>
			<p>
				In the case of childs with display: inline we will get the width property stops depending on the content. The height property looks the same like before if the height property isn't defined to the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #3</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: grid to the parent</span>
				</div>
			</div>
			<p>
				If the height property is defined to the parent we will better see how the property stretches.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item when the height property is applied to the parent before adding display: grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid" style="height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item when the height property is applied to the parent after adding display: grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items when the height property is applied to the parent before adding display: grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid" style="height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #3</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items when the height property is applied to the parent after adding display: grid to it</span>
				</div>
			</div>
			<p>
				If the content of a grid item doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent.
			</p>
			<p>
				As a result, the content of childs with display: block will be displayed the same after adding display: grid to its parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before adding display: grid the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after adding display: grid to the parent</span>
				</div>
			</div>
			<p>
				The width property of the childs with display: inline stops to be calculated depending on the maximum line length.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after adding display: grid to the parent</span>
				</div>
			</div>
			<p>
				<span class="page__point">7</span>
				By default, grid items start on a new line. For this reason childs with display: block still saves position. 
			</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #3 with some text</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4 with a loooooooooooong very loooooooooooong text </span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item some text #3</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #4 with a loooooooooooong very loooooooooooong text </span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: grid to the parent</span>
				</div>
			</div>
			<p>
				In contrast to the case with childs with display: block, childs with display: inline changes default position.
			</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #3 with some text</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #4 with a loooooooooooong very loooooooooooong text </span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item some text #3</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #4 with a loooooooooooong very loooooooooooong text </span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: grid to the parent</span>
				</div>
			</div>
			<h3>Box model features of grid items</h3>
			<p>
				<span class="page__point">8</span>
				The width and height properties can be set to grid items. It's why we won't see some changes after changing the display property of the parent with the block value to grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>					
						</div>
					</div>	
					<span class="page__demo-caption">the item the width and height properties are applied before adding display: grid to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the grid item</span>
							</div>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after adding display: grid to the parent</span>
				</div>	
			</div>
			<p>When considering childs with display: inline we already can set the width and height properties after adding display: grid to the parent.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before adding display: grid to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the grid item</span>
							</span>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after adding display: grid to the parent</span>
				</div>	
			</div>
			<p>
				<span class="page__point">9</span>
				The padding and border properties can be set too. They will work without changes for childs with display: block.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items after adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items after adding display: grid</span>
				</div>
			</div>
			<p>
				When it comes to childs with display: inline vertical paddings and borders stop ending up outside the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the grid item #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the grid item #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items after adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the grid item #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the grid item #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items after adding display: grid to the parent</span>
				</div>
			</div>
			<p>
				Pay attention, vertical margins don't end up outside the parent. That leads to we'll see changes if display: block is set to childs.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the grid item</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after adding display: grid to the parent</span>
				</div>
			</div>
			<p>
				Vertical margins of childs with display: inline cease to end up outside the parent when adding display: grid to it.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the grid item</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after adding display: grid to the parent</span>
				</div>
			</div>
			<p>
				If the parent has two childs with display: block margins stop ending up outside it from the first child and the bottom from the last.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item after adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item after adding display: grid to the parent</span>
				</div>
			</div>
			<p>
				In the case, we set margins for adjacent childs with display: block they stop collapsing.
			</p>			
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before adding display: grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the grid item #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after adding display: grid to the parent</span>
				</div>
			</div>
			<p>Also, margins cease to overlap paddings and borders.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin position-relative">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent before adding display: grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding display-grid">
							<span class="demo-box is-margin position-relative">
								<span class="demo-box__text">I'm the grid item</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent after adding display: grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin position-relative">
									<span class="demo-box__text">I'm the item with display: inline</span>
								</span>																		
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent before adding display: grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">		
							<div class="parent-border display-grid">
								<span class="demo-box is-margin position-relative">
									<span class="demo-box__text">I'm the grid item</span>
								</span>																		
							</div>
						</div>
					</div>						
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent after adding display: grid to it</span>
				</div>
			</div>
			<p>
				When applying margin: auto the width and height properties of the childs are calculated depending on the content after adding display: grid to the parent. All space between the childs and the parent's borders will be shared evenly.
			</p>
			<p>
				We'll see the width property stops to be equal to the width property of the parent after changing the block value on grid. 
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport"style="height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the height property is applied to the parent before adding display: grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-grid" style="height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the grid item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the height property is applied to the parent after adding display: grid to it</span>
				</div>
			</div>
			<p>
				The width and height properties keep behavior after changing the inline value on grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport"style="height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the height property is applied to the parent before adding display: grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-grid" style="height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the grid item</span>
							</span>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the height property is applied to the parent after adding display: grid to it</span>
				</div>
			</div>
			<p>
				Adding margin: auto to grid items stops filling all space of the width and height properties.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-grid"style="height: 150px">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">the item when display: grid with the height property are applied to the parent before adding margin: auto</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-grid" style="height: 150px">
							<div class="demo-box is-margin-auto display-grid">
								<span class="demo-box__text">I'm the grid item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">the item when display: grid with the height property are applied to the parent after adding margin: auto</span>
				</div>
			</div>
		</section>
		<section id="inline-grid-tab" aria-labelledby="inline-grid" role="tabpanel" tabindex="0" class="page__content" aria-labelledby="inline-grid-heading" hidden>
			<h2 id="inline-grid-heading" class="ha-screen-reader">The inline-grid value</h2>
			<h3>Default behavior</h3>
			<p>
				<span class="page__point">1</span>
				The width and height property of elements with display: inline-grid calculate depending on the content.
			</p>
			<p>
				If the element has display: block by default we'll see the width property stops to fill up all available space by the text direction after changing the block value on inline-grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item after changing on display: inline-grid</span>
				</div>
			</div>
			<p>
				In turn, changing the inline value on grid won't lead to changes.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after changing on display: inline-grid</span>
				</div>
			</div>
			<p>
				If the content of elements with display: inline-grid doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent.
			</p>	
			<p>
				If we change the block value on grid then we won't see changes.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: block with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after changing on display: inline-grid</span>
				</div>
			</div>	
			<p>
				And if we change the inline value to inline-grid the width property stops depending on the maximum line length.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after changing on display: inline-grid</span>
				</div>
			</div>
			<p>
				<span class="page__point">2</span>
				By default elements with display: inline-grid are lining up. Also, a gap will be created between them.
			</p>
			<p>
				So if we change the block value to inline-grid the elements' position will be changed.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the items before changing on display: inline-grid</span>
				</div>		
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
							</div>
							<div class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items after changing on display: inline-grid</span>
				</div>		
			</div>
			<p>
				When we change the inline value to inline-grid elements will keep lining up. 
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items before changing on display: inline-grid</span>
				</div>		
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
							</span>
							<span class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items after changing on display: inline-grid</span>
				</div>		
			</div>
			<p>
				If elements can't fit on the line they will fully move to a new line in contrast to elements with display: inline.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #4</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items before changing on display: inline-grid</span>
				</div>		
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
							</span>
							<span class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
							</span>
							<span class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
							</span>
							<span class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items after changing on display: inline-grid</span>
				</div>		
			</div>
			<h3>Box model features</h3>
			<p>
				<span class="page__point">3</span>
				The width and height properties can be set to elements with display: inline-grid. Therefore we don't notice changes when changing the block value to inline-grid. 
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before changing on display: inline-grid</span>
				</div>		
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-grid demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline-grid</span>
							</div>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after changing on display: inline-grid</span>
				</div>		
			</div>			
			<p>The width and height properties start to apply after changing the inline value to inline-grid.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before changing on display: inline-grid</span>
				</div>		
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box display-inline-grid demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline-grid</span>
							</span>				
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after changing on display: inline-grid</span>
				</div>		
			</div>			
			<p>
				<span class="page__point">4</span>
				The padding and border properties can be set for elements with display: inline-grid. 
			</p>
			<p>
				If the element has display: block by default we won't see any changes after changing the block value on inline-grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: block #1</span>
						</div>
						<div class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: block #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items before changing on display: inline-grid</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box display-inline-grid is-padding">
							<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
						</div>
						<div class="demo-box display-inline-grid is-padding">
							<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items after changing on display: inline-grid</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: block #1</span>
						</div>
						<div class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: block #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">borders are applied to the items before changing on display: inline-grid</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<div class="demo-box display-inline-grid is-border">
							<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
						</div>
						<div class="demo-box display-inline-grid is-border">
							<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
						</div>							
					</div>
					<span class="page__demo-caption">borders are applied to the items after changing on display: inline-grid</span>
				</div>	
			</div>
			<p>
				And we'll see them after changing the inline value to inline-grid because vertical paddings and borders stop ending up outside the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: inline #1</span>
						</span>
						<span class="demo-box is-padding">
							<span class="demo-box__text">I'm the item with display: inline #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items before changing on display: inline-grid</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box display-inline-grid is-padding">
							<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
						</span>
						<span class="demo-box display-inline-grid is-padding">
							<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">paddings are applied to the items after changing on display: inline-grid</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: inline #1</span>
						</span>
						<span class="demo-box is-border">
							<span class="demo-box__text">I'm the item with display: inline #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">borders are applied to the items before changing on display: inline-grid</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-viewport">
						<span class="demo-box display-inline-grid is-border">
							<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
						</span>
						<span class="demo-box display-inline-grid is-border">
							<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
						</span>							
					</div>
					<span class="page__demo-caption">borders are applied to the items after changing on display: inline-grid</span>
				</div>	
			</div>
			<p>
				Since vertical margins of elements with display: block might end up outside the parent, this behavior stops after changing the block value to inline-grid. 
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after changing on display: inline-grid</span>
				</div>
			</div>
			<p>
				If the parent has a few elements with display: block top margins will end up outside it from the first element and the bottom from the last. 
			</p>
			<p>
				When changing the block value to inline-grid this behavior cancels. Also, elements without margins can have gaps. 
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-grid is-margin">
								<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
							</div>
							<div class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item after changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item before changing on display: inline-grid</span>
				</div>
			</div>	
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
							</div>
							<div class="demo-box display-inline-grid is-margin">
								<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item after changing on display: inline-grid</span>
				</div>
			</div>
			<p>
				Also, margins between adjacent elements stop collapsing after changing the block value to inline-grid.
			</p>		
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
							</div>
							<div class="demo-box display-inline-grid is-margin">
								<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
							</div>
							<div class="demo-box display-inline-grid is-margin">
								<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
							</div>							
							<div class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after changing on display: inline-grid</span>
				</div>
			</div>
			<p>
				Vertical margins of elements with display: inline don't end up outside the parent anymore after changing the inline value to inline-grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
							</span>
							<span class="demo-box is-margin display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: inline-grid</span>
				</div>
			</div>
			<p>
				Also, they already don't overlap paddings or margins that are set to the parent after changing the inline value to inline-grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin display-inline-grid" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
							</span>
							<span class="demo-box is-margin display-inline-grid" style="position: relative">
								<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when paddings are applied to the parent after changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #1</span>
								</span>
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #2</span>
								</span>						
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin display-inline-grid" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
								</span>
								<span class="demo-box is-margin display-inline-grid" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
								</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when borders are applied to the parent after changing on display: inline-grid</span>
				</div>
			</div>
			<p>
				Plus, changing the inline value to inline-grid leads margins again displays when the overflow is applied. The value should be different from the visible.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #1</span>
								</span>
								<span class="demo-box is-margin" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline #2</span>
								</span>						
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when overflow: auto is applied to the parent before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="overflow-auto">
								<span class="demo-box is-margin display-inline-grid" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
								</span>
								<span class="demo-box is-margin display-inline-grid" style="position: relative">
									<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
								</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items when overflow: auto is applied to the parent after changing on display: inline-grid</span>
				</div>
			</div>	
			<p>
				Margins stop to end outside the parent and overlap each other after changing the inline value to inline-grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>							
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #4</span>
							</span>	
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #5</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #6</span>
							</span>
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline #7</span>
							</span>	
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #1</span>
							</span>
							<span class="demo-box is-margin display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #2</span>
							</span>
							<span class="demo-box is-margin display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #3</span>
							</span>							
							<span class="demo-box is-margin display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #4</span>
							</span>			
							<span class="demo-box is-margin display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #5</span>
							</span>
							<span class="demo-box is-margin display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #6</span>
							</span>
							<span class="demo-box is-margin display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid #7</span>
							</span>	
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after changing on display: inline-grid</span>
				</div>
			</div>
			<p>
				If we define margin: auto to elements with display: block or display: inline that continues doesn't work after adding display: inline-grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto display-inline-grid">
								<span class="demo-box__text">I'm the item with display: inline-grid</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after changing on display: inline-grid</span>
				</div>
			</div>
			<p>
				It doesn't work even if the width property is defined.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to them before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<div class="demo-box is-margin-auto display-inline-grid" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: inline-grid</span>
							</div>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to them after changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to them before changing on display: inline-grid</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="height: 150px">
							<span class="demo-box is-margin-auto display-inline-grid" style="width: 50%">
								<span class="demo-box__text">I'm the item with display: inline-grid</span>
							</span>						
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when the width property is applied to them after changing on display: inline-grid</span>
				</div>
			</div>
			<h3>Default behavior of grid items</h3>
			<div class="page__remark remark">
				<p>
					Note! Grid items are childs of the element with display: grid or display: inline-grid
				</p>
			</div>
			<p>
				<span class="page__point">5</span>
				Grid items always are blockified. It means all block values are saved.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the block value is saved</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-flex">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the grid item with display: grid</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the grid value is saved</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box display-grid">
								<span class="demo-box__text">I'm the grid item with display: grid</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the grid value is saved</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box display-table">
								<span class="demo-box__text">I'm the grid item with display: table</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the table value is saved</span>
				</div>
			</div>
			<p>
				All inline values will be changed on block values. So the inline and inline-block values will be changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.
			</p>
			<div class="page__remark remark">
				<p>
					Note! Please, check the Computed tab on devTools to see how a browser changes a computed value for the display property
				</p>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline value is changed to the block value</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box display-inline-block">
								<span class="demo-box__text">I'm the grid item with display: inline-block</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline value-block is changed to the block value</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box display-inline-flex">
								<span class="demo-box__text">I'm the grid item with display: inline-flex</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline-flex value is changed to the flex value</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box display-inline-grid">
								<span class="demo-box__text">I'm the grid item with display: inline-grid</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline-grid value is changed to the grid value</span>
				</div>				
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box display-inline-table">
								<span class="demo-box__text">I'm the grid item with display: inline-table</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the inline-table value is changed to the table value</span>
				</div>				
			</div>
			<p>
				<span class="page__point">6</span>
				The width property of grid items is equal to the width property of the parent. The height property tries to fill all space.
			</p>
			<p>
				Thus the width property keeps being equal to the width property of the parent for childs with display: block. The height property stops depending on the content.  
			</p>
			<p>
				Also displaying of properties might confuse you. The width and height property looks like they calculate on depending content. 
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #3</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<p>
				In this case, if the width and height properties are defined to the parent filling all space of the width and height property is more noticeable.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="width: 50%; height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item when the width and height properties are applied to the parent before adding display: inline-grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid" style="width: 50%; height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item when the width and height properties are applied to the parent after adding display: inline-grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="width: 50%; height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the items when the width and height properties are applied to the parent before adding display: inline-grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid" style="width: 50%; height: 150px;">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #3</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the items when the width and height properties are applied to the parent after adding display: inline-grid to it</span>
				</div>
			</div>
			<p>
				In the case of childs with display: inline we will get the width and height properties stop depending on the content. 
			</p>
			<p>
				Visual confusion is present too. The width and height properties look the same like before if the width and height properties aren't defined to the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #3</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<p>
				After defining the width and height property to the parent we will better see how the property stretches.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="width: 50%; height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item when the width and height properties are applied to the parent before adding display: inline-grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid" style="width: 50%; height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item when the width and height properties are applied to the parent after adding display: inline-grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport" style="width: 50%; height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #3</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items when the width and height properties are applied to the parent before adding display: inline-grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid" style="width: 50%; height: 150px;">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #3</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the items when the width and height properties are applied to the parent after adding display: inline-grid to it</span>
				</div>
			</div>
			<p>
				If the content of a grid item doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent.
			</p>
			<p>
				As a result, the content of childs with display: block will be displayed the same after adding display: inline-grid to its parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<p>
				The width property of the childs with display: inline stops to be calculated depending on the maximum line length.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item with a loooooooooooong very loooooooooooong text text text text text text text text text text text text text text text text</span>
							</span>
						</div>
					</div>
					<span class="page__demo-caption">the item with multiline text after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<p>
				<span class="page__point">7</span>
				By default, grid items start on a new line. For this reason childs with display: block still saves position. 
			</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #3 with some text</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4 with a loooooooooooong very loooooooooooong text </span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item some text #3</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #4 with a loooooooooooong very loooooooooooong text </span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<p>
				In contrast to the case with childs with display: block, childs with display: inline changes default position.
			</p>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #3 with some text</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the item with display: inline #4 with a loooooooooooong very loooooooooooong text </span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">	
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item some text #3</span>
							</span>
							<span class="demo-box">
								<span class="demo-box__text">I'm the grid item #4 with a loooooooooooong very loooooooooooong text </span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">the items after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<h3>Box model features of grid items</h3>
			<p>
				<span class="page__point">8</span>
				The width and height properties can be set to grid items. It's why we won't see some changes after changing the display property of the parent with the block value to inline-grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>					
						</div>
					</div>	
					<span class="page__demo-caption">the item the width and height properties are applied before adding display: inline-grid to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the grid item</span>
							</div>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after adding display: inline-grid to the parent</span>
				</div>	
			</div>
			<p>
				When considering childs with display: inline we already see the width and height properties start to apply.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied before adding display: inline-grid to the parent</span>
				</div>	
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box demo-box_with-sizes">
								<span class="demo-box__text">I'm the grid item</span>
							</span>					
						</div>
					</div>
					<span class="page__demo-caption">the item the width and height properties are applied after adding display: inline-grid to the parent</span>
				</div>	
			</div>
			<p>
				<span class="page__point">9</span>
				The padding and border properties can be set too. They will work without changes for childs with display: block.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box is-padding">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box is-border">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items after adding display: inline-grid</span>
				</div>
			</div>
			<p>
				When it comes to childs with display: inline vertical paddings and borders stop ending up outside the parent.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the grid item #1</span>
							</span>
							<span class="demo-box is-padding">
								<span class="demo-box__text">I'm the grid item #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">paddings are applied to the items after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the item with display: inline #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the grid item #1</span>
							</span>
							<span class="demo-box is-border">
								<span class="demo-box__text">I'm the grid item #2</span>
							</span>							
						</div>
					</div>
					<span class="page__demo-caption">borders are applied to the items after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<p>
				Pay attention, vertical margins don't end up outside the parent. That leads to we'll see changes if display: block is set to childs.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the grid item</span>
							</div>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<p>
				Vertical margins of childs with display: inline cease to end up outside the parent when adding display: inline-grid to it.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<span class="demo-box is-margin">
								<span class="demo-box__text">I'm the grid item</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<p>
				If the parent has two childs with display: block margins stop ending up outside it from the first child and the bottom from the last.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the first item after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the last item after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<p>
				In the case, we set margins for adjacent childs with display: block they stop collapsing.
			</p>			
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the item with display: block #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the item with display: block #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items before adding display: inline-grid to the parent</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport display-inline-grid">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #1</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the grid item #2</span>
							</div>
							<div class="demo-box is-margin">
								<span class="demo-box__text">I'm the grid item #3</span>
							</div>							
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item #4</span>
							</div>							
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the items after adding display: inline-grid to the parent</span>
				</div>
			</div>
			<p>Also, margins cease to overlap paddings and borders.</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding">
							<span class="demo-box is-margin position-relative">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent before adding display: inline-grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport parent-padding display-inline-grid">
							<span class="demo-box is-margin position-relative">
								<span class="demo-box__text">I'm the grid item</span>
							</span>																		
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when paddings are applied to the parent after adding display: inline-grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">
							<div class="parent-border">
								<span class="demo-box is-margin position-relative">
									<span class="demo-box__text">I'm the item with display: inline</span>
								</span>																		
							</div>
						</div>
					</div>
					<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent before adding display: inline-grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">
						<div class="page__demo-viewport">		
							<div class="parent-border display-inline-grid">
								<span class="demo-box is-margin position-relative">
									<span class="demo-box__text">I'm the grid item</span>
								</span>																		
							</div>
						</div>
						<span class="page__demo-caption">margins are applied to the item when borders are applied to the parent after adding display: inline-grid to it</span>
					</div>
				</div>
			</div>
			<p>
				When applying margin: auto the width and height properties of the childs are calculated depending on the content after adding display: inline-grid to the parent. All space between the childs and the parent's borders will be shared evenly.
			</p>
			<p>
				We'll see the width property stops to be equal to the width property of the parent after changing the block value on inline-grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport"style="width: 50%; height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: block</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the width and height properties are applied to the parent before adding display: inline-grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-inline-grid" style="width: 50%; height: 150px">
							<div class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the grid item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the width and height properties are applied to the parent after adding display: inline-grid to it</span>
				</div>
			</div>
			<p>
				The width and height properties keep behavior after changing the inline value on inline-grid.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport"style="width: 50%; height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the item with display: inline</span>
							</span>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the width and height properties are applied to the parent before adding display: inline-grid to it</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-inline-grid" style="width: 50%; height: 150px">
							<span class="demo-box is-margin-auto">
								<span class="demo-box__text">I'm the grid item</span>
							</span>																		
						</div>
					</div>	
					<span class="page__demo-caption">margins are applied to the item when the width and height properties are applied to the parent after adding display: inline-grid to it</span>
				</div>
			</div>
			<p>
				Adding margin: auto to grid items stops filling all space of the width and height properties.
			</p>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-inline-grid"style="width: 50%; height: 150px">
							<div class="demo-box">
								<span class="demo-box__text">I'm the grid item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">the item when display: inline-grid with the width and height properties are applied to the parent before adding margin:&nbspauto</span>
				</div>
			</div>
			<div class="page__demos" aria-hidden="true">
				<div class="page__demo">
					<div class="page__demo-container">	
						<div class="page__demo-viewport display-grid" style="width: 50%; height: 150px">
							<div class="demo-box is-margin-auto display-inline-grid">
								<span class="demo-box__text">I'm the grid item</span>
							</div>																		
						</div>
					</div>	
					<span class="page__demo-caption">the item when display: inline-grid with the width and height properties are applied to the parent after adding margin:&nbspauto</span>
				</div>
			</div>
		</section>	
	</main>
	<aside class="page__widgets" data-uia-control-skin="2">
		<div class="page__widgets-item">
			<div class="page__widget page__substack">
				<div class="page__widget-text">
					<p><span aria-hidden="true">👀</span> This cheat sheet is a part of the my project that is named like CSS isn't magic. I offer you to join to me</p>
				</div>
				<a href="https://cssisntmagic.substack.com/archive" class="page__widget-share ra-link uia-control" target="_top">
					<span class="uia-control__group">Join to CSS isn't magic</span>
				</a>
			</div>
		</div>
	</aside>	
</div>
!

CSS 

              
                @import url('https://fonts.googleapis.com/css?family=Baloo+Tammudu|Indie+Flower&display=swap');

:root {
  /*
  - Spacing following paragraphs to at least 2 times the font size;
  The 1.4.12 requirements from WCAG 2.2 https://www.w3.org/TR/WCAG22/#text-spacing
  This gap should be computed taking into account the line-height
  */

  --_ds-typography-main-margin: var(--ds-typography-main-margin, 1.25em);
}

body {
  font-family: var(--ds-typography-main-font-family, system-ui);
  font-size: var(--ds-typography-main-font-size, 1rem);
  color: var(--ds-typography-main-color, #222);
  line-height: var(--ds-typography-main-line-height, 1.75);
}

p:not([class]) {
  margin-block: var(--ds-typography-paragraph-margin-block-start, var(--_ds-typography-main-margin)) 0;
}

:is(ul, ol):not([class]) {
  margin-block: var(--ds-typography-list-margin-block-start, var(--_ds-typography-main-margin)) 0;
}

li:not([class]):nth-child(n+2) {
  margin-block-start: var(--ds-typography-list-item-margin-block-start, .75em);
}

:is(h1, h2, h3, h4, h5, h6):not([class]) {
  /*
    You will need to set a font family and line height sometimes 
    because they will differ from the main text
  */
  margin-block: var(--ds-typography-heading-margin-block-start, 2.5em) var(--ds-typography-heading-margin-block-end, 0);
  line-height: var(--ds-typography-heading-line-height, inherit);
  font-family: var(--ds-typography-heading-font-family, inherit);
}

:is(h1, h2, h3, h4, h5, h6, p):not([class]):first-child,
h1:not([class]) + h2:not([class]),
h2:not([class]) + h3:not([class]), 
h3:not([class]) + h4:not([class]),
h4:not([class]) + h5:not([class]),
h5:not([class]) + h6:not([class]) {
  margin-block-start: 0;
}

h1:not([class]) {
  font-size: var(--ds-typography-h1-font-size, 2rem);
}

h2:not([class]) {
  font-size: var(--ds-typography-h2-font-size, 1.75rem);
}

h3:not([class]) {
  font-size: var(--ds-typography-h3-font-size, 1.5rem);
}

h4:not([class]) {
  font-size: var(--ds-typography-h4-font-size, 1.375rem);
}

h5:not([class]) {
  font-size: var(--ds-typography-h5-font-size, 1.25rem);
}

h6:not([class]) {
  font-size: var(--ds-typography-h6-font-size, 1.125rem);
}

a:not([class]) {
  color: var(--ds-typography-link-color, #5e4ef3);
  text-decoration: var(--ds-typography-link-text-decoration-line, underline) 
                   var(--ds-typography-link-text-decoration-thickness, 2px) 
                   var(--ds-typography-link-text-decoration-style, solid)
                   var(--ds-typography-link-text-decoration-color, currentColor);
  text-underline-offset: var(--ds-typography-link-text-decoration-offset, 5px);
}

img{
  display: var(--ds-typography-img-display, block);
  max-inline-size: var(--ds-typography-img-max-width, 100%);
}

/*
=====
HELPERS
=====
*/

.is-margin {
	margin: 10px;
	outline: 10px solid var(--margin-area-color)
}

.is-margin-top {
	box-shadow: 0 -10px 0 0 var(--margin-area-color);
}

.is-margin-bottom {
	box-shadow: 0 10px 0 0 var(--margin-area-color);
}

.is-margin-left {
	box-shadow: -10px 0 0 0 var(--margin-area-color);
}

.is-margin-right {
	box-shadow: 10px 0 0 0 var(--margin-area-color);
}

.is-margin-left-auto {
	box-shadow: -10px 0 0 0 var(--margin-area-color);
}

.is-margin-right-auto {
	box-shadow: 10px 0 0 0 var(--margin-area-color);
}

.is-padding {
	padding: 10px;
	box-shadow: 0 0 0 10px var(--padding-area-color) inset;
}

.is-border {
	border: 10px solid var(--border-area-color);
}

.parent-padding {
	padding: 15px;
}

.parent-padding::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	border: 15px solid var(--padding-area-color);
}

.parent-padding-vertical {
	padding-block: 15px;
}

.parent-padding-vertical::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	border-block: 15px solid var(--padding-area-color);
}

.parent-padding-horizontal {
	padding-inline: 15px;
}

.parent-padding-horizontal::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	border-inline: 15px solid var(--padding-area-color);
}

.parent-padding-top {
	padding-top: 15px;
}

.parent-padding-top::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	border-top: 15px solid var(--padding-area-color);
}

.parent-padding-bottom {
	padding-bottom: 15px;
}

.parent-padding-bottom::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	border-bottom: 15px solid var(--padding-area-color);
}

.parent-border {
	border: 15px solid var(--border-area-color);
}

.parent-border-vertical {
	border-block: 15px solid var(--border-area-color);
}

.parent-border-horizontal {
	border-inline: 15px solid var(--border-area-color);
}

.parent-border-top {
	border-top: 15px solid var(--border-area-color);
}

.parent-border-bottom {
	border-bottom: 15px solid var(--border-area-color);
}

.parent-height {
	block-size: 320px;
}

.margin-top-10 {
	margin-top: 10px;
}

.margin-bottom-10 {
	margin-bottom: 10px;
}

.margin-right-10 {
	margin-right: 10px;
}

.margin-left-10 {
	margin-left: 10px;
}

.margin-right-auto {
	margin-right: auto;
}

.margin-left-auto {
	margin-left: auto;
}

.is-margin-auto {
	margin: auto;
}

.display-inline-block {
	display: inline-block;
}

.display-table {
	display: table;
}

.display-table-caption {
	display: table-caption;
}

.display-table-cell {
	display: table-cell;
}

.display-table-column {
	display: table-column;
}

.display-table-column-group {
	display: table-column-group;
}

.display-table-footer-group {
	display: table-footer-group;
}

.display-table-header-group {
	display: table-header-group;
}

.display-table-row {
	display: table-row;
}

.display-table-row-group {
	display: table-row-group;
}

.display-inline-table {
	display: inline-table;
}

.display-grid {
	display: grid;
}

.display-inline-grid {
	display: inline-grid;
}

.display-inline-flex {
	display: inline-flex;
}

.display-flex {
	display: flex;
}

.flex-direction-row {
	flex-direction: row;
}

.flex-direction-column {
	flex-direction: column;
}

.justify-content-flex-start {
	justify-content: flex-start;	
}

.justify-content-center {
	justify-content: center;	
}

.justify-content-flex-end {
	justify-content: flex-end;	
}

.justify-content-space-between {
	justify-content: space-between;	
}

.justify-content-space-around {
	justify-content: space-around;	
}

.align-items-flex-start {
	align-items: flex-start;
}

.align-items-center {
	align-items: center;
}

.align-items-flex-end {
	align-items: flex-end;
}

.align-items-baseline {
	align-items: baseline;
}

.align-items-stretch {
	align-items: stretch;
}

.align-self-flex-start {
	align-self: flex-start;
}

.align-self-center {
	align-self: center;
}

.align-self-flex-end {
	align-self: flex-end;
}


.align-items-baseline {
	align-self: baseline;
}

.align-self-stretch {
	align-self: stretch;
}

.position-relative {
	position: relative;
}

.position-absolute {
	position: absolute;
}

.position-fixed {
	position: fixed;
}

.position-static {
	position: static;
}

.position-sticky {
	position: sticky;
}

.top-0 {
	top: 0;
}

.left-0 {
	left: 0;
}

.top-10 {
	top: 10px;
}

.left-10 {
	left: 10px;
}

.top--10 {
	top: -10px;
}

.left--10 {
	left: -10px;
}

.bottom-0 {
	bottom: 0;
}

.right-0 {
	right: 0;
}

.bottom-10 {
	bottom: 10px;
}

.right-10 {
	right: 10px;
}

.bottom--10 {
	bottom: -10px;
}

.right--10 {
	right: -10px;
}

.overflow-auto {
	overflow: auto;
}

/*
=====
TEMPLATE
=====
*/

/*
=====
RESET
=====
*/
:where(.ra-list) {
	margin-block-start: var(--ra-list-margin-block-start, 0);
	margin-block-end: var(--ra-list-margin-block-end, 0);
	padding-inline-start: var(--ra-list-padding-inline-start, 0);
	list-style: var(--ra-list-list-style, none);
}

.ra-link {
	display: var(--ra-link-display, inline-flex);
}

.ra-link[href] {
	color: var(--ra-link-color, inherit);
	text-decoration: var(--ra-link-text-decoration, none);
}

:where(.ra-button) {
	background-color: var(--ra-button-background-color, transparent);
	padding: var(--ra-button-padding, var(--ra-button-padding-top, 0) var(--ra-button-padding-right, 0) var(--ra-button-padding-bottom, 0) var(--ra-button-padding-left, 0));
	border: var(--ra-button-border, var(--ra-button-border-width, 0) var(--ra-button-border-style, solid) var(--ra-button-border-color, currentcolor));

	font-family: var(--ra-button-font-family, inherit);
	font-size: var(--ra-button-font-size, 1em);
	font-weight: var(--ra-button-font-weight, inherit);

	color: var(--ra-button-color, currentcolor);
	text-align: var(--ra-button-text-align, center);
	text-transform: var(--ra-button-text-transform, inherit);
	letter-spacing: var(--ra-button-letter-spacing, inherit);
	word-spacing: var(--ra-button-word-spacing, inherit);

	text-shadow: var(--ra-button-text-shadow, none);
	display: var(--ra-button-display, inline-flex);
}

/*
======
UIA-CONTROL
======
*/

.uia-control__group {
	cursor: var(--uia-control-cursor, var(--_uia-control-cursor, pointer));	
	line-height: var(--uia-control-line-height, 1);
}

.uia-control {
	--_uia-control-padding_default: 0;

	--_uia-control-border-width: var(--uia-control-border-width);
	--_uia-control-border-style: var(--uia-control-border-style, solid);
	--_uia-control-border-color: var(--uia-control-border-color, currentColor);
	--_uia-control-padding: var(--uia-control-padding,
		var(--uia-control-padding-block-start, var(--_uia-control-padding_default))
		var(--uia-control-padding-inline-end, var(--_uia-control-padding_default))
		var(--uia-control-padding-block-end, var(--_uia-control-padding_default))
		var(--uia-control-padding-inline-start, var(--_uia-control-padding_default))
	);
	--_uia-control-border: var(--_uia-control-border-width) var(--_uia-control-border-style) var(--_uia-control-border-color);
	--_uia-control-border-radius: var(--uia-control-border-radius, .25rem);
}

.uia-control__group {
	display: var(--uia-control-display, inline-grid);
	padding: var(--_uia-control-padding);

	border: var(--_uia-control-border);
	border-radius: var(--_uia-control-border-radius);
	background-image: linear-gradient(
		var(--uia-control-background-degree, 135deg),
		var(--uia-control-background-start-color, var(--uia-control-background-color))
		var(--uia-control-background-start-position, 0),
		var(--uia-control-background-end-color, var(--uia-control-background-color))
		var(--uia-control-background-end-position, 100%)
	);
}

[data-uia-control-skin="2"] .uia-control__group {
	box-sizing: border-box;
	min-inline-size: var(--uia-control-min-main-size, 0);
	text-align: var(--uia-control-text-align, center);
}

[data-uia-control-skin="3"] {
	--_uia-control-stroke-color: var(--uia-control-stroke-color, currentColor);
	--_uia-control-stroke-thickness: var(--uia-control-stroke-thickness, 0);
	--_uia-control-stroke-thickness-selected: var(--uia-control-stroke-thickness-selected, 2px);
}

[data-uia-control-skin="3"]	.uia-control__group {
	transition: box-shadow .15s ease-out;
	box-shadow: inset 0 0 0 var(--_uia-control-stroke-thickness) var(--_uia-control-stroke-color);
}

[data-uia-control-skin="3"] [aria-selected="true"] {
	--uia-control-border-color: var(--_uia-control-stroke-color);
	--_uia-control-stroke-thickness: var(--_uia-control-stroke-thickness-selected);
}

@media (forced-colors: active) {

	[data-uia-control-skin="3"] [aria-selected="true"] {
		--uia-control-border-width: 5px;

		block-size: calc(100% - 5px);
	}
}

/*
=====
UIA-SCROLLER
=====
*/

.uia-scroller {
	display: var(--uia-scroller-display, flex);
	gap: var(--uia-scroller-gap, 0);
	overflow: var(--uia-scroller-overflow-x, auto) var(--uia-scroller-overflow-y, auto);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: var(--uia-scroller-overscroll-behavior-inline, contain) var(--uia-scroller-overscroll-behavior-block, contain);
	scroll-snap-type: var(--uia-scroller-scroll-snap-type, x mandatory);
}

.uia-scroller__item {
	inline-size: var(--uia-scroller-item-inline-size, calc(100% / var(--uia-scroller-visible-items-number, 1)));
	flex: none;
	scroll-snap-align: var(--uia-scroller-scroll-snap-align, start);
}

.uia-scroller::-webkit-scrollbar {
	inline-size: var(--uia-scroller-scrollbar-width);
	block-size: var(--uia-scroller-scrollbar-height);
}

.uia-scroller::-webkit-scrollbar-thumb {
	background-color: var(--uia-scroller-thumb-color);
}

.uia-scroller::-webkit-scrollbar-track {
	background-color: var(--uia-scroller-track-color);
}

/*
=====
HELPERS
=====
*/

.ha-focus *:focus {
	outline: var(--ha-outline-width, 2px) var(--ha-outline-style, solid) var(--ha-outline-color, currentColor);
	outline-offset: var(--ha-outline-offset, 0);
}

.ha-screen-reader {
	width: var(--ha-screen-reader-width, 1px);
	height: var(--ha-screen-reader-height, 1px);

	position: var(--ha-screen-reader-position, absolute);
	clip-path: var(--ha-screen-reader-clip-path, rect(1px, 1px, 1px, 1px));
	overflow: var(--ha-screen-reader-overflow, hidden);
	white-space: var(--ha-screen-reader-white-spacw, nowrap);
}

/*
=====
CORE STYLES
=====
*/

:root {
    /* color tokens */

	--white: #fff;
	--black: #222;

	--gray-light: #f9f9fe;
	--gray: #f0f0f0;
	--gray-dark: #d3d1d1;	

	--main-color-light: #f7f1ff;
	--main-color: #906aeb;
	--main-color-dark: #814dff;

	--warning-color-light: #ffe5e2;
	--warning-color-dark: #f37667;

	--accent-color-light: #fed26c;
	--accent-color: #feca57;
	--accent-color-dark: #fbb128;

	--helping-color-light: #fff3ed;
	--helping-color: #ffd3bd;
	--helping-color-dark: #ffa87c;

	/* gaps tokens */

	--gap-2xs:   .25rem;
	--gap-xs:    .5rem;
	--gap-s:     .75rem;
	--gap-m:     1rem;
	--gap-l:     1.25rem;
	--gap-xl:    1.5rem;
	--gap-2xl:   2rem;

	/* border radius tokens */

	--radius-s:   .25rem;
	--radius-m:    .5rem;
	--radius-l:    1.5rem;

	/* typography tokens */

	--font-size-s:   .75rem;
	--font-size-m:   1rem;
	--font-size-l:  1.5rem; 
	--font-size-xl:  1.75rem; 

	--content-area-color: #c1f1e3;
	--parent-area-color: #579ceb;
	--padding-area-color: var(--main-color-dark); 
	--border-area-color: var(--accent-color-dark);
	--margin-area-color: var(--accent-color);

	--ds-typography-heading-font-family: Indie Flower, cursive;
	--ds-typography-heading-line-height: 1.25;
	--ds-typography-heading-margin-block-end: .5em;
	--ds-typography-h3-font-size: var(--font-size-xl);
	--ds-typography-paragraph-margin-block-start: .75em;

	--tabs-control-padding: var(--gap-m) var(--gap-xl);
	--tabs-control-background-color: var(--main-color-light);
	--tabs-control-border-width: 3px;
	--tabs-control-border-color: transparent;
	--tabs-control-border-radius: var(--gap-xl);
	--tabs-control-stroke-color: var(--main-color-dark);
	--tabs-control-border-color-hover: var(--main-color-dark);

	--remark-font-size: var(--font-size-s);
	--remark-padding: var(--gap-2xs) var(--gap-m);
	--remark-line-inline-size: var(--gap-2xs);
	--remark-line-border-radius: var(--radius-s);
	--remark-line-background-color: var(--warning-color-dark);	

	--infographics-gap: var(--gap-m) var(--gap-xl);
	--infographics-padding: var(--gap-m) var(--gap-l);
	--infographics-border: 1px solid var(--warning-color-dark);
	--infographics-background-color: var(--warning-color-light);
	--infographics-border-radius: var(--radius-m);
	--infographics-font-size: var(--font-size-s);   
	--infographics-parent-padding: var(--gap-2xs) var(--gap-l) var(--gap-m);
	--infographics-parent-background-color: var(--white);
	--infographics-parent-border: 2px dashed var(--parent-area-color);
	--infographics-parent-font-family: 'Baloo Tammudu', cursive;
	--infographics-parent-font-size: var(--font-size-s);
	--infographics-parent-text-parent: var(--gap-xs) var(--gap-2xs) 0;
	--infographics-item-padding: var(--gap-m) var(--gap-m) var(--gap-xs);
	--infographics-item-border: 2px solid var(--content-area-color);
	--infographics-item-background-color: var(--content-area-color);

	--demo-parent-area-color: var(--parent-area-color);
	--demo-caption-font-size: var(--font-size-s);
	--demo-fluid-caption-font-size: var(--font-size-s);
	--demo-box-background-color: var(--content-area-color);
	--demo-box-font-size: var(--font-size-s);
	--demo-box-accent-color: var(--helping-color-light);

	--widget-font-size: var(--font-size-s);
	--widget-gap: var(--gap-s) var(--gap-l);
	--widget-padding: calc(var(--gap-xl) - 1px) calc(var(--gap-l) - 1px);
	--widget-border-radius: var(--radius-s);
	--widget-button-padding: var(--gap-m) var(--gap-xl);
	--widget-button-border-radius: var(--radius-l);

	--substack-background-color: var(--helping-color-light);	
	--substack-button-background-color: var(--helping-color);
	--substack-button-border-color: var(--helping-color-dark);

	--ha-outline-color: var(--accent-color-dark);
	--ha-outline-offset: 5px;	
}

@media (forced-colors: active) {
	:root {
		--parent-area-color: var(--white);	
	}
}

@media (max-width: 1800px) {
	:root {
		font-size: 1.125rem;
	}
}

@media (min-width: 1801px) {
	:root {
		font-size: 1.25rem;
	}
}

body {
	margin: 0;
	background-color: var(--gray);
	padding: 1rem clamp(.25rem, 1vw, 2rem);
}

.page {
	/*
	1. min-inline-size is defined for correct displaying of the demos with position: absolute
	*/
	display: grid;
	min-inline-size: 21rem;
	padding: var(--gap-2xl) clamp(.5rem, 5vw, 3rem);

	background-color: var(--white);
	box-shadow: 1px 1px 10px 1px var(--gray-dark);
	border-radius: var(--radius-s);
}

.page__navigation {
	--uia-control-min-main-size: 100%;
	--uia-scroller-item-inline-size: fit-content;
	--uia-scroller-scrollbar-height: 0;

	font-size: var(--font-size-s);
	overflow: hidden;
}

.page__navigation-group {
	/*
	1. padding is defined for reservation of space for item's outline 
	when it is focused. It's the best way because if we set it to 
	the parent that will override the padding-inline-start properly 
	from .ra-list. Also I don't want to create one more tag for it.
	*/

	padding: var(--navigation-group-outline-space, .5rem);
}

.page__navigation-button {
	/*
	1. The handler of pushing the navigation buttons uses 
	event.target. So I need to make the layer so that the 
	handler works on the button
	*/

	position: relative;
}

.page__navigation-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.page__graphic-description {
	container-type: inline-size;
	container-name: inline-size-infographics-changing;
}

.page__infographics {
	display: grid;
	gap: var(--infographics-gap);

	padding: var(--infographics-padding);
	border: var(--infographics-border);

	font-size: var(--infographics-font-size);   
	background-color: var(--infographics-background-color);
	border-radius: var(--infographics-border-radius);
}


@container inline-size-infographics-changing (min-width: 560px) {

	.page__infographics {
		grid-template-columns: 1fr 17rem;
		align-items: center;
	}
}

.page__graphic {
	padding: var(--infographics-parent-padding);
	border: var(--infographics-parent-border);
	background-color: var(--infographics-parent-background-color);

	font-family: var(--infographics-parent-font-family);
	font-size: var(--infographics-parent-font-size);
}

.page__graphic-parent {
	display: block;
	padding: var(--infographics-parent-text-parent);
}

.page__graphic-child {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--infographics-item-padding);
	border: var(--infographics-item-border);
	background-color: var(--infographics-item-background-color);

	forced-color-adjust: none;
}

.page__content > h3:nth-child(2) {
	--ds-typography-heading-margin-block-start: 0;
}

.page__demos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--gap-2xl);
}

.page__demos:not(:first-child) {
	margin-block-start: var(--gap-xl);
}

.page__demos:not(:last-child) {
	margin-block-end: var(--gap-2xl);
}

.page__point {
	font-family: 'Baloo Tammudu', cursive;
	font-size: var(--font-size-l);
	color: var(--main-color-dark);
	line-height: 1;
}

.page__point::after {
	content: "";
	display: inline-flex;
	inline-size: var(--gap-2xs);
	block-size: var(--gap-2xs);
	border-radius: 50%;
	background-color: currentColor;
}

.page__remark {
	margin-block: var(--gap-m) var(--gap-xs);
	inline-size: min(100%, 75ch);
	box-sizing: border-box;

	font-size: var(--remark-font-size);
	font-style: italic;
	padding: var(--remark-padding);
	position: relative;
}

.page__remark::before {
	content: "";
	inline-size: var(--remark-line-inline-size, 4px);
	block-size: var(--remark-line-block-size, 100%);

	border-radius: var(--remark-line-border-radius, 2px);
	background-color: var(--remark-line-background-color, currentColor);

	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
}

.page__widgets {
	display: grid;
	gap: var(--gap-xl);
}

.page__widgets-item {
	container-type: inline-size;
	container-name: inline-size-changing;
}

.page__widget {
	--uia-control-min-main-size: var(--widget-button-min-inline-size, 12rem);
	--uia-control-padding: var(--widget-button-padding);
	--uia-control-border-width: 2px;
	--uia-control-border-radius: var(--widget-button-border-radius);

	box-sizing: border-box;
	min-block-size: 100%;

	display: grid;
	gap: var(--widget-gap);

	font-size: var(--widget-font-size, inherit);
	background-color: var(--widget-background-color);
	border: 1px solid transparent;
	padding: var(--widget-padding);
	border-radius: var(--widget-border-radius);
}

@container inline-size-changing (min-inline-size: 500px) {

	.page__widget {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
}

.page__widget-share {	
	margin: auto;
}

.page__substack {
	--uia-control-border-color: var(--substack-button-border-color);
	--uia-control-background-color: var(--substack-button-background-color);
	--widget-background-color: var(--substack-background-color);	
}

@media (max-width: 1280px) {

	.page {
		gap: var(--gap-2xl);
	}
}

@media (min-width: 981px) {

	.page__navigation {
		--uia-scroller-display: grid;
		--uia-scroller-item-inline-size: auto;
	}

	.page__navigation-list {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	}

	.page__navigation-button {
		inline-size: 100%;
	}
}

@media (min-width: 1281px) {

	.page {
		grid-template-columns: 70ch 1fr;
		align-items: flex-start;
		gap: var(--gap-xl) 3.75rem;
	}

	.page__navigation {
		grid-column: 2;
	}

	.page__container {
		grid-row: 1 / span 4;
	}

	.page__infographics {
		grid-column: 2;
	}

	.page__widgets {
		grid-column: 2;
		box-sizing: border-box;
	}
}

@media (min-width: 1801px) {

	.page {
		max-inline-size: 98rem;

		display: grid;
		grid-template-columns: 22rem 70ch 1fr;
		align-items: flex-start;
		gap: var(--gap-xl) 4rem;
	}

	.page__navigation {
		grid-column: 1;
	}
	.page__infographics {
		grid-column: 1;
	}

	.page__container {
		grid-column: 2;
	}

	.page__widgets {
		grid-column: 3;
		grid-row: 1 / span 3;
	}
}

/*
=====
DEMO
=====
*/

.page__demo {
	display: grid;
	row-gap: var(--demo-caption-gap, .5rem);
}

.page__demo-viewport {
	position: relative;
	forced-color-adjust: none;
}

.page__demo-viewport::after {
	content: "";
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 100%;
	border: 2px dashed var(--demo-parent-area-color);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
}

.page__demo-viewport-fixed {
	filter: opacity(1);
}

.page__demo-caption {
	text-align: center;
	font-size: var(--demo-caption-font-size);
	font-style: italic;
}

.page__demo-fluid-caption {
	display: block;
	text-align: center;
	margin-block-start: 2.25rem;

	font-size: var(--demo-fluid-caption-font-size);
	font-style: italic;
}

.demo-box {
	background-color: var(--demo-box-background-color);
	font-family: 'Baloo Tammudu', cursive;
	font-size: var(--demo-box-font-size);
}

.demo-box_with-sizes {
	inline-size: var(--demo-box-width, 148px);
	block-size: var(--demo-box-height, 148px);
}

.demo-box_accent {
	background-color: var(--demo-box-accent-color);
}

[role="tablist"] {
	--uia-control-padding: var(--tabs-control-padding);
	--uia-control-background-color: var(--tabs-control-background-color);
	--uia-control-border-width: var(--tabs-control-border-width);
	--uia-control-border-color: var(--tabs-control-border-color);
	--uia-control-border-radius: var(--tabs-control-border-radius);
	--uia-control-stroke-color: var(--tabs-control-stroke-color);
}

[role="tab"]:not([aria-selected="true"]):hover {
	--uia-control-border-color: var(--tabs-control-border-color-hover);
}
!

JS 

              
                /*
*   This content is licensed according to the W3C Software License at
*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*/
(function () {
  var tablist = document.querySelectorAll('[role="tablist"]')[0];
  var tabs;
  var panels;

  generateArrays();

  function generateArrays () {
    tabs = document.querySelectorAll('[role="tab"]');
    panels = document.querySelectorAll('[role="tabpanel"]');
  }

  // For easy reference
  var keys = {
    end: 35,
    home: 36,
    left: 37,
    up: 38,
    right: 39,
    down: 40,
    delete: 46,
    enter: 13,
    space: 32
  };

  // Add or subtract depending on key pressed
  var direction = {
    37: -1,
    38: -1,
    39: 1,
    40: 1
  };

  // Bind listeners
  for (i = 0; i < tabs.length; ++i) {
    addListeners(i);
  }

  function addListeners (index) {
    tabs[index].addEventListener('click', clickEventListener);
    tabs[index].addEventListener('keydown', keydownEventListener);
    tabs[index].addEventListener('keyup', keyupEventListener);

    // Build an array with all tabs (<button>s) in it
    tabs[index].index = index;
  }

  // When a tab is clicked, activateTab is fired to activate it
  function clickEventListener (event) {
    var tab = event.target;
    activateTab(tab, false);
  }

  // Handle keydown on tabs
  function keydownEventListener (event) {
    var key = event.keyCode;

    switch (key) {
      case keys.end:
        event.preventDefault();
        // Activate last tab
        focusLastTab();
        break;
      case keys.home:
        event.preventDefault();
        // Activate first tab
        focusFirstTab();
        break;

      // Up and down are in keydown
      // because we need to prevent page scroll >:)
      case keys.up:
      case keys.down:
        determineOrientation(event);
        break;
    }
  }

  // Handle keyup on tabs
  function keyupEventListener (event) {
    var key = event.keyCode;

    switch (key) {
      case keys.left:
      case keys.right:
        determineOrientation(event);
        break;
      case keys.delete:
        determineDeletable(event);
        break;
      case keys.enter:
      case keys.space:
        activateTab(event.target);
        break;
    }
  }

  // When a tablist’s aria-orientation is set to vertical,
  // only up and down arrow should function.
  // In all other cases only left and right arrow function.
  function determineOrientation (event) {
    var key = event.keyCode;
    var vertical = tablist.getAttribute('aria-orientation') == 'vertical';
    var proceed = false;

    if (vertical) {
      if (key === keys.up || key === keys.down) {
        event.preventDefault();
        proceed = true;
      }
    }
    else {
      if (key === keys.left || key === keys.right) {
        proceed = true;
      }
    }

    if (proceed) {
      switchTabOnArrowPress(event);
    }
  }

  // Either focus the next, previous, first, or last tab
  // depending on key pressed
  function switchTabOnArrowPress (event) {
    var pressed = event.keyCode;

    if (direction[pressed]) {
      var target = event.target;
      if (target.index !== undefined) {
        if (tabs[target.index + direction[pressed]]) {
          tabs[target.index + direction[pressed]].focus();
        }
        else if (pressed === keys.left || pressed === keys.up) {
          focusLastTab();
        }
        else if (pressed === keys.right || pressed == keys.down) {
          focusFirstTab();
        }
      }
    }
  }

  // Activates any given tab panel
  function activateTab (tab, setFocus) {
    setFocus = setFocus || true;
    // Deactivate all other tabs
    deactivateTabs();

    // Remove tabindex attribute
    tab.removeAttribute('tabindex');

    // Set the tab as selected
    tab.setAttribute('aria-selected', 'true');

    // Get the value of aria-controls (which is an ID)
    var controls = tab.getAttribute('aria-controls');

    // Remove is-hidden class from tab panel to make it visible
    document.getElementById(controls).hidden = false;

    // Set focus when required
    if (setFocus) {
      tab.focus();
    }
  }

  // Deactivate all tabs and tab panels
  function deactivateTabs () {
    for (t = 0; t < tabs.length; t++) {
      tabs[t].setAttribute('tabindex', '-1');
      tabs[t].setAttribute('aria-selected', 'false');
    }

    for (p = 0; p < panels.length; p++) {
      panels[p].hidden = true;
    }
  }

  // Make a guess
  function focusFirstTab () {
    tabs[0].focus();
  }

  // Make a guess
  function focusLastTab () {
    tabs[tabs.length - 1].focus();
  }

  // Detect if a tab is deletable
  function determineDeletable (event) {
    target = event.target;

    if (target.getAttribute('data-deletable') !== null) {
      // Delete target tab
      deleteTab(event, target);

      // Update arrays related to tabs widget
      generateArrays();

      // Activate the closest tab to the one that was just deleted
      if (target.index - 1 < 0) {
        activateTab(tabs[0]);
      }
      else {
        activateTab(tabs[target.index - 1]);
      }
    }
  }

  // Deletes a tab and its panel
  function deleteTab (event) {
    var target = event.target;
    var panel = document.getElementById(target.getAttribute('aria-controls'));

    target.parentElement.removeChild(target);
    panel.parentElement.removeChild(panel);
  }

  // Determine whether there should be a delay
  // when user navigates with the arrow keys
  function determineDelay () {
    var hasDelay = tablist.hasAttribute('data-delay');
    var delay = 0;

    if (hasDelay) {
      var delayValue = tablist.getAttribute('data-delay');
      if (delayValue) {
        delay = delayValue;
      }
      else {
        // If no value is specified, default to 300ms
        delay = 300;
      }
    }

    return delay;
  }
}());
!
999px

Console