Filling the top and bottom of the inline element

Question

Quote from Head first html:

You can add padding to the top and bottom of the inline element, but indentation does not affect the spacing of other inline elements around it, so the overlay will overlap other inline elements

a) As far as I understand the above quote, adding indentation to the top and bottom of the inline element has no effect on the surrounding elements and, therefore, on the appearance of the page ?!

b) But what exactly is meant by "filling will overlap other inline elements"? Is this possible, assuming that under certain circumstances the overlay (above and below the inline element) will affect the appearance of the page ?!

thanks

Answer 1

If I understood correctly and from the example , I just did:

a) the text is an inline element, so I add a range with upper and lower indentation without pushing other lines down

b), as you can see, since I added color to the range, the color will overlap other lines.

I hope this is correct and will answer your question: D

Answer 2

Use the built-in block instead. Add these properties to all the elements you want to indent. For instance:

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

Answer 3

Try the following:

 <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 4

Indentation affects the element itself. For example, any text inside an element will be more padded from other DOM elements.