index.html

--- layout: single property_name: min-width ---<section id="min-width" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/min-width/" data-property-name="min-width" data-tooltip="Single page for this property" target="_blank">Link</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="min-width">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/min-width" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#min-width"><span>#</span>min-width</a></h2><div class="property-description"><p>Defines the minimum width of the element.</p></div></header><style type="text/css">.min-width .block { display: inline-block;vertical-align: top; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="min-width: 0;">min-width: 0;</code></p><div class="example-description"><p>The element has <strong>no minimum</strong> width.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div min-width" id="min-width-0"><p class="block block--alpha">Hello world</p></div></div></aside></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="min-width: 300px;">min-width: 300px;</code></p><div class="example-description"><p>You can use <strong>numeric values</strong> like <strong>pixels</strong>, <strong>(r)em</strong>, <strong>percentages</strong>...</p><p>If the <em>minimum</em> width is <strong>larger</strong> than the element&#39;s <em>actual</em> width, the min width will be applied.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div min-width" id="min-width-300px"><p class="block block--alpha">Hello world</p></div></div></aside><style type="text/css">#min-width-300px .block { min-width: 300px; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="min-width: 5px;">min-width: 5px;</code></p><div class="example-description"><p>If the <em>minimum</em> width is <strong>smaller</strong> than the element&#39;s <em>actual</em> width, the min width has <strong>no effect</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div min-width" id="min-width-5px"><p class="block block--alpha">Hello world</p></div></div></aside><style type="text/css">#min-width-5px .block { min-width: 5px; }</style></section></section>