Padding on inline elements goes extremely well with Fitts’ Law about csslint HOT 16 CLOSED

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).

from csslint.

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

from csslint.

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.

from csslint.

afaik, left and right margins on inline elements work

from csslint.

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

from csslint.

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. :)

from csslint.

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.

from csslint.

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.

from csslint.

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]

from csslint.

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.

from csslint.

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

from csslint.

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?

from csslint.

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.

from csslint.

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.

from csslint.

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.

from csslint.

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.

from csslint.