Padding the Top and the Bottom of Inline Element

Padding for Inline Elements

It is claimed in the book that an inline element has complete padding
properties but no margin-top/button properties, only margin-left/right
properties.

My first question is, where can I find this as an official statement?

You won't, because it isn't quite true. In the box model it says that for margin-top and margin-bottom:

These properties have no effect on non-replaced inline elements.

But "no effect" does not mean that the properties don't exist. Specifically, they do exist for the purposes of inheritance. Consider this example:

p { border:1px solid red }i { vertical-align:top; }span { margin-top: 20px; margin-bottom: 20px;  }b { display:inline-block; }.two { margin:inherit;  }

<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p><p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

Padding the top and the bottom of inline element

If I understand correctly, and from an example I just made:

a) the text is an inline element, so me adding a span with top and bottom padding is not pushing the other lines down

b) as you can see, since I've added a color to the span, the color will overlap the other lines.

I hope this is both right, and answers your question :D

Weird padding behaviour for inline element (bottom padding is respected but top padding doesn't)

Use the browser tools to inspect the element and you'll see that there is also a padding-top of 10em, which is not visible in your snippet.

The reason: Although there is a padding for inline elements, it does not affect the distance above and below it - the line (i.e. baseline for the text) is at the same vertical position where it would be (or better: is) without the padding. The padding here just creates an overflowing area which you only see if there is a background defined.

See my snippet, where I added a wrapper with a 12em padding-top and some text before and after the inline div, and also before and after the wrapper div which demonstrates what happens.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.wrap1 {
  padding-top: 12em;
  background: green;
  /* display: block; is the default here */
}

.parent {
  display: inline;
  background-color: red;
  padding: 10rem;
  color: white;
}

.y {
  background: rgba(255, 255, 0, 0.4);
  border-radius: 50%;
  padding: 0.6em 0.15em 0.6em 0.1em;
}

<body>
  <div>This is in a separate div which preceds the inline div and its wrapper.</div>
  <div class="wrap1">
    this is on the same the line
    <div class="parent">Whatever</div> yes it is
  </div>
  <div>And this is in a separate div following the inline div and its wrapper.</div>
  <p>And here is another line with one (inline) <span class="y">word</span> that has a padding in a way that <em>might</em> be considered useful.</p>
</body>

Why does just top border of inline element overflow? Why not left border?

The top and bottom borders of an inline element have no effect on its layout, or the layout of surrounding boxes. Only its left and right borders do — these, along with left and right margins and padding, push the content further away from surrounding boxes. From the spec:

Horizontal margins, borders, and padding are respected between these boxes.

inline element does not accept margin-top

Inline elements and margins is a hot topic because of its unusual activity. Some people use padding to overcome this problem.

.....

Another way is to use display:table; instead of display:inline;

best way is to....

use css styling like this

div{
position:relative;
top:-2px;
}

this brings the div 2 pixels down.

Padding on span element push it above container

It's not that padding doesn't apply at all to inline elements, rather that their top and bottom values won't be taken into account as far as "pushing away" content in preceding/successive lines. More on that here.

body>div {
  width: 150px;
  height: 150px;
  background: black;
  margin-top: 40px;
  display: inline-block;
  vertical-align: bottom;
  color: white;
}

div>div,
div>span {
  border-radius: 5px;
  padding: 10%;
  background: red;
}

<div>Lorem ipsum dolor sit amet consectetur
  <div>Lorem ipsum dolor</div> consectetur adipisicing elit.</div>
<div>Lorem ipsum dolor sit amet consectetur <span>Lorem ipsum dolor</span> consectetur adipisicing elit.</div>