snipt

Ctrl+h for KB shortcuts

CSS

Natural box style

1
2
3
4
/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* paulirish.com/2012/box-sizing-border-box-ftw/ */
https://snipt.net/embed/15dbbdd06a377e4b5d02aa5bea7e1e05/
/raw/15dbbdd06a377e4b5d02aa5bea7e1e05/
15dbbdd06a377e4b5d02aa5bea7e1e05
css
CSS
4
2019-07-12T02:25:31
True
False
False
/api/public/snipt/41946/
natural-box-style
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="c">/* apply a natural box layout model to all elements */</span> </span><span id="L-2"><a name="L-2"></a><span class="o">*</span> <span class="p">{</span> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">sizing</span><span class="o">:</span> <span class="nb">border</span><span class="o">-</span><span class="n">box</span><span class="p">;</span> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">sizing</span><span class="o">:</span> <span class="nb">border</span><span class="o">-</span><span class="n">box</span><span class="p">;</span> <span class="n">box</span><span class="o">-</span><span class="n">sizing</span><span class="o">:</span> <span class="nb">border</span><span class="o">-</span><span class="n">box</span><span class="p">;</span> <span class="p">}</span> </span><span id="L-3"><a name="L-3"></a> </span><span id="L-4"><a name="L-4"></a><span class="c">/* paulirish.com/2012/box-sizing-border-box-ftw/ */</span> </span></pre></div> </td></tr></table>
border-box, margin, padding, width

HTML

IE7 double padding on submit

1
2
3
4
//Fix double padding on submit button on IE7
<input type=”submit” value=”Submit button OK style=”padding: 20px; overflow: visible;” />

//add overflow: visible to css
https://snipt.net/embed/ec4a867eea1da1275c61bcb21fd8b76e/
/raw/ec4a867eea1da1275c61bcb21fd8b76e/
ec4a867eea1da1275c61bcb21fd8b76e
html
HTML
4
2019-07-15T04:11:12
True
False
False
/api/public/snipt/25695/
ie7-double-padding-on-submit
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>//Fix double padding on submit button on IE7 </span><span id="L-2"><a name="L-2"></a><span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">”submit”</span> <span class="na">value</span><span class="o">=</span><span class="s">”Submit</span> <span class="na">button</span> <span class="na">OK</span><span class="err">”</span> <span class="na">style</span><span class="o">=</span><span class="s">”padding:</span> <span class="na">20px</span><span class="err">;</span> <span class="na">overflow:</span> <span class="na">visible</span><span class="err">;”</span> <span class="p">/&gt;</span> </span><span id="L-3"><a name="L-3"></a> </span><span id="L-4"><a name="L-4"></a>//add overflow: visible to css </span></pre></div> </td></tr></table>
html, ie7, padding

CSS

padding adds to the overall width of the element. This can cause a lot of frustration with elements shifting out of place.

1
2
3
4
5
#div {
width:200px;
padding: 30px;
border:2px solid #000;
}
https://snipt.net/embed/4208f65e066656ae4adb947f08f873bf/
/raw/4208f65e066656ae4adb947f08f873bf/
4208f65e066656ae4adb947f08f873bf
css
CSS
6
2019-07-12T21:32:49
True
False
False
/api/public/snipt/8114/
padding-adds-to-the-overall-width-of-the-element-this-can-cause-a-lot-of-frustration-with-elements-shifting-out-of-place
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nn">#div</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a><span class="nb">width</span><span class="o">:</span><span class="m">200px</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a><span class="nb">padding</span><span class="o">:</span> <span class="m">30px</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a><span class="nb">border</span><span class="o">:</span><span class="m">2px</span> <span class="nb">solid</span> <span class="m">#000</span><span class="p">;</span> </span><span id="L-5"><a name="L-5"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
padding

CSS

pad images nicely on website css

1
2
3
4
img {
        padding: 10px;
        margin: 5px;
}
https://snipt.net/embed/5626de5cb19e493660a42d628b20a434/
/raw/5626de5cb19e493660a42d628b20a434/
5626de5cb19e493660a42d628b20a434
css
CSS
4
2019-07-03T08:56:44
True
False
False
/api/public/snipt/858/
pad-images-nicely-on-website-css
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="nt">img</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="nb">padding</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a> <span class="nb">margin</span><span class="o">:</span> <span class="m">5px</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, image, img, padding, web