tags:

views:

609

answers:

4

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

+1  A: 

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

Evan Meagher
What are DOM elements?
SourceC
Elements of the Document Object Model. Basically any HTML tag.
Evan Meagher
won't inline element only be padded from elements to the left and right of it, but not from elements on top or below it?
SourceC
+2  A: 

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>
Michał Górny
+3  A: 

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

theIV
Weird, background color ( yellow ) of inline element doesn’t hide the text on the line below the element, while it hides the texts on the line above the element. Why?
SourceC
@SourceC: That much I can't answer :( I'm guessing that it probably changes from browser to browser, but I haven't verified that.
theIV
+1  A: 

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;
}
Nimbuz