0

I was trying for display:inline property and I found same question for which I was looking....and here I got this answer, it makes me very clear ....but I am not clear about these lines ...

Basically margin, padding and border can be set on inline-level elements, but they may not behave as you expect. The behavior will probably be OK if there's only one line, but other lines in the same flow will likely exhibit behavior different from your expectations (i.e. padding will not be respected).

so please anybody can make me clear about these lines...I have also tried for display :inline here

Community
  • 1
  • 1
Jamna
  • 2,561
  • 7
  • 28
  • 22

5 Answers5

2

You cannot set height, margin-top, margin-bottom, padding-top and padding-bottom on an inline element. You can set margin left and right an padding left an right.

You can set with on an inline element but then it will behave like a block element: See here

Inline Elements will always be displayed next to each other as long a they fit next to each other.

Community
  • 1
  • 1
wosis
  • 1,209
  • 10
  • 14
  • Hi,wosis i just want to clear one more thing as you said that we can not set padding-top and padding-bottom on inline element I just tried this thing but when I set padding:50px it's working also for top and bottom.....you can see here http://jsfiddle.net/jamna/7rVDz/5/ – Jamna Jun 30 '11 at 10:28
2

yes inline element behave differently other then block element. the main point of inline element is that is doesn't take vertical margin & padding.

inline elements like a, span

you can give inline-block instead of inline this is a best example related to your question

http://www.maxdesign.com.au/articles/inline/

EDIT

yes, padding-bottom pushing the inline element down but it's not add any width to your inline element means when the content move to new line it's going to overlap each other & in block element margin, padding & border are adding width,height & space the block element

check these link for more

http://reference.sitepoint.com/css/inlineformatting

Community
  • 1
  • 1
sandeep
  • 91,313
  • 23
  • 137
  • 155
0

with this property set (display:inline) you can't set width and height of your element. Margin, padding & border is ok. I'd use floating instead, but that's because it gives me more flexibility sometimes. =]

benqus
  • 1,119
  • 2
  • 10
  • 24
0

It is saying that if you have an inline element that goes all the way to the right of the page and then wraps around to the left (for example, a single line of text that takes up two lines of space) then you may have unexpected consequences. In particular the padding may not display as desired.

jsonnull
  • 415
  • 3
  • 12
0

An inline element, when it doesn't break on to multiple lines, respects left/right padding - so you see the padding-left and padding-right inside the left and right edges of the element respectively.

When the inline element does break on to multiple lines, the padding is somewhat respected, in that again both left and right inside edges of the element have padding. The part where it isn't respected is exactly the part where the element breaks, the break-point doesn't have any padding because it simply spreads itself onto the next line.

A block element on the other hand, does respect padding properly because it adds the padding and the contents of the element break inside that padding.

Here's a quick image to help explain what I've explained:

enter image description here

danjah
  • 2,939
  • 2
  • 30
  • 47