Padding on inline elements goes extremely well with Fitts’ Law

[riddle]

While margin is ignored by good browsers, padding on inline elements is perfectly okay. I’m sure it’s a slight oversight though. :)

[w0rm]

I've been using both paddings and margins on inline elements. Left and right margins are sometimes needed to add additional spaces to inline elements, and I used padding to control vertical position of bottom border (for custom underlines).

[riddle]

Margin on inline elements won’t work (it will on inline-block though). The only exception is IE6 and 7.

[stubbornella]

I think IE6/7 treat inline like inline block and do show margins, but maybe I'm wrong. Seems like we need a test case.

[thierryk]

afaik, left and right margins on inline elements work

[w0rm]

Here is a test case: http://jsfiddle.net/6Vqnc/

[riddle]

I think IE6/7 treat inline like inline block and do show margins, but maybe I'm wrong.

They do. Still, I don’t understand why padding is included in that warning. :)

[thierryk]

IE6 and 7 treat inline elements like other browsers do, and like other browsers left and right padding/margin 'work' (they create space). Afaik, IE6 and 7 will treat an inline box as an inline-block only if the former has a layout.

span {
    margin:30px;
    padding:30px;
}

em {
    margin:30px;
    padding:30px;
    zoom:1;
}

The span should look the same across browsers, but not the em. The latter will change the flow because of top/bottom margin and padding that will behave as on block elements.

[w0rm]

Top and bottom paddings on inline elements are consistent among all browsers. They just don't behave like on block elements (vertical paddings expand background of inline element, but don't change vertical alignment of the text).
I'm surprised how can it be something new to know.

[thierryk]

Actually, I noticed this is something confusing for many authors. I have this page that shows a few test-cases explaining what's normal/expected behavior:

http://www.css-101.org/inline-level-elements/

[/shameless plug]

[riddle]

An element with display set inline-block accepts margin, inline doesn’t. I’m not sure what is the problem here, the behavior is pretty simple.

[w0rm]

Inline elements do accept left and right margins, period, enough said.

[nzakas]

So it sounds like the suggestion here is that display: inline elements used with left/right padding or margin should not cause a warning BUT if top/bottom are used, that should still be a warning. Is that correct? Nicole?

[thierryk]

I'd say yes for top/bottom margins, but for padding it's different. top/bottom padding play a role in the painting of background and borders, so it's perfectly normal to include them if it is to serve that purpose.
A common use for example, is to apply a bottom padding on the active "tab" in a menu to hide part of the bottom border that styles the list. If this works nicely, it is because of the special way padding works on inline elements.

[riddle]

I agree wholeheartedly with thierryk. The whole reason to submit the issue was to exclude the warning for padding applied on inline elements. It doesn’t make sense.

[drobati]

This confused me yesterday enough to come find this issue today.

Chrome was displaying my list item elements (for my menu) with padding (left and right) and display inline fine. Glad to see that this should just apply to margin which I hadn't used.

[nzakas]

Okay, so list of changes to be made here:

1. display: inline with any padding is okay.
2. display: inline with margin-right or margin-left is okay.