Padding the top and the bottom of inline element

Question

Hello

Quote from Head first html:

You can add padding to the top and bottom of inline element, but the padding doesn’t affect the spacing of the other inline elements around it, so the padding will overlap other inline elements

a) As far as I understand the above quote, adding padding to the top and bottom of inline element doesn’t ( ever ) have any effects on surrounding elements and thus on the look of the page?!

b) But what exactly is meant by “padding will overlap other inline elements”? Does it perhaps suggest that in certain circumstances padding ( top and bottom of an inline element ) will have effect on the look of the page?!

thanx

Answer 1

The padding will affect the element itself. For example, any text within the element will be more padded from other DOM elements.

Answer 2

Try this:

<style type="text/css">
  div { background: blue; height: 4em; padding: 1em }
  span { background: red; padding: .5em; }
</style>

<div>
  <span>one</span>
  <br/>
  <span>two</span>
</div>

Answer 3

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

Answer 4

Use inline-block instead. Add these properties to all the elements on which you want to add padding. For example:

a:link {
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;
}