title: Padding for Inline Elements
body: <p>I am reading a book about CSS basics. It is claimed in the book that an inline element has complete padding properties but no <strong>margin-top/bottom</strong> properties, only <strong>margin-left/right</strong> properties.</p>
  <p>My first question is, where can I find this as an official statement? I found <a href="http://www.w3.org/TR/REC-CSS2/visudet.html#q15" rel="nofollow noreferrer">here</a> that if <strong>margin-top/bottom</strong> is set to <code>auto</code> then it is set to <code>0</code>. But isn't that different from saying <strong>margin-top/bottom</strong> does not apply to inline-elements?</p>
  <p>My second question is, does an inline element really got complete padding properties? I tried the following example:</p>
  <p><a href="https://i.stack.imgur.com/T84RY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T84RY.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt; &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div style="margin: 20px; border: solid 20px;background: red;"&gt;
      &lt;p style="margin:0"&gt;
        test test test test test test test test test test test test test test test test test test test test test test test test
        &lt;strong style="padding:20px;background-color:yellow"&gt;hello&lt;/strong&gt; test test test test
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Now, this shows that padding actually works somehow, but for some reason, <code>padding-top</code> and <code>padding-bottom</code> has no effect on the surrounding text. Why is that? Is this mentioned anywhere in the W3 standards?</p>