metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Metro 4 includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Spacing - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Spacing</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Spacing</h1> <p class="text-leader"> Metro 4 includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance. </p>  <h3>Notation</h3> <p> The classes are named using the format <code>{property}{sides}-{size}</code> for default and <code>{property}{sides}-{size}-{breakpoint}</code> for <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> and <code>xxl</code> breakpoints. </p> <p> Where <i>property</i> is one of: </p> <ul> <li><code>m</code> - margin classes</li> <li><code>p</code> - padding classes</li> </ul> <p> Where <i>sides</i> is one of: </p> <ul> <li><code>t</code> - <code>margin-top</code> or <code>padding-top</code></li> <li><code>b</code> - <code>margin-bottom</code> or <code>padding-bottom</code></li> <li><code>l</code> - <code>margin-left</code> or <code>padding-left</code></li> <li><code>r</code> - <code>margin-right</code> or <code>padding-right</code></li> <li><code>x</code> - <code>margin-right</code> and <code>margin-left</code> or <code>padding-right</code> and <code>padding-left</code></li> <li><code>y</code> - <code>margin-top</code> and <code>margin-bottom</code> or <code>padding-top</code> and <code>padding-bottom</code></li> </ul> <p> Where <i>size</i> from <code>0</code> to <code>80px</code> with step <code>4px</code> </p> <div class="example"> <div class=" bg-pink fg-white p-1 p-3-md p-5-lg p-8-xl text-center"> This block with dynamic padding </div> </div> <pre><code class="html"> <div class=" bg-pink fg-white p-1 p-3-md p-5-lg p-8-xl text-center"> This block with dynamic padding </div> </code></pre> <p class="remark alert"> if you need to have different paddings on different sides, you must define them explicitly for each of the parties. <pre><code class="html"> <div class="pl-10 pt-4 pr-10 pb-4"> This block with any paddings </div> </code></pre> </p> <h4>Negative margin</h4> <p> Also Metro 4 contains <code>margin</code> with negative value. To use add negative margin, use classes with suffix <code>-minus</code>. </p> <pre><code> <div class="mb-4-minus"> ... </div> </code></pre> <h3>Additional</h3> <p> Additionally, Metro 4 also includes an <code>.mx-auto</code>, <code>.ml-auto</code> and <code>.mr-auto</code> and them media variants. This classes sets <code>margin</code> to <code>auto</code>. </p> <ul> <li><code>mx-auto</code> - set right and left to auto</li> <li><code>ml-auto</code> - set left to auto</li> <li><code>mr-auto</code> - set right to auto</li> </ul> <div class="example"> <div class="mx-auto p-2 bg-cyan fg-white" style="width: 220px">This centered block with mx-auto class</div> </div> <pre><code class="html"> <div class="mx-auto p-2 bg-cyan fg-white" style="width: 220px"> This centered block with mx-auto class </div> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>