How to properly add a messages class

[freshface]

Hi I created a message class like this;

    background: $warning-background;
    color: $warning-text;

h2, h3, h4, h5, h6 {
color: $warning-text;
}

}```

And the HTML

`<div class="message">
                <h6>Message</h6>
                <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
            </div>`

But when adding a 1px padding on the .message class I get a lot of padding:

Here is a [screenshot](http://f.cl.ly/items/0M0n432i0a030f2O3G0Z/Screen%20Shot%202013-06-03%20at%2010.28.45.png)

[TheDutchCoder]

You probably shouldn't use headings in things like this, as they're not part of the outline of your document.
If you follow the BEM style, then it might be better to use classes like '.message' for the container and '.message__heading' for the heading and '.message__body' for any other containing element.

The 'padding' you see is probably margin on the heading and paragraph.

[freshface]

Thank your for your reply. So I should not use headings in this case? Or a heading with the .message__heading class?

[andykirk]

I'd probably use <p class="message__heading"><strong>...

Cheers

[TheDutchCoder]

Yes as @andykirk said, that would be appropriate in this case.
Just make sure you don't use the 'strong' element just to bold the text (that's what CSS is for), but in this case it's justified because you actually would want the heading to be 'pronounced' with emphasis.

[andykirk]

@TheDutchCoder - I mentioned <strong> so that there would be some semantics attached to the text since a <hx> isn't being used. IMO it's appropriate to emphasise 'Message' or 'Warning' or 'Success' in this context, but you're right, if the 'heading' is long and wordy, or doesn't need emphasising, then don't use <strong> just to make it bold.

However, an argument could also be made that a <b> tag could also be appropriate here, as a way of marking the heading as distinct from the actual text.

[RobertinoValue]

Your <div class="message"> has padding: 0 and margin: 0.
Your <h6> has margin-top: 24.97760009765625px;, margin-bottom: 24.97760009765625px;, and padding: 0;.
Your <p>has margin-top: 16px;, margin-bottom: 16px;, and padding: 0;.

Because your <div class="message"> has no margin and no padding, the browser makes the margin-top of your <h6> (24.97760009765625px) fall outside of the div (so the top margin of the h6 is above the <div class="message">).

Because your <div message> has no margin and no padding, the browser makes the margin-bottom of your <p> (16px) fall outside of the <div class="message"> (so the bottom margin of the <p> is below the <div class="message">).

(SKIP because irrelevant: And  the margin-bottom of the <h6> (24.97760009765625px) overlaps with the margin-top (16px) of the <p> below it. You will only see a max margin of 24.97760009765625px between the 2.)

By adding a 1px padding to <div class="message">, the browser moves the margin-top of your <h6> to inside the <div class="message">. And also the margin-bottom of your <p> to inside the <div class="message">.

Only when specifying padding for <div class="message"> :
One way to "fix" it, is by specifying margin-top: 0; for (the first) .message > h2, h3, h4, h5, h6 and margin-bottom: 0; for (the last) .message > p.
And then (to keep the margin between elements above and below the message like it was before) specify the margin-top of the <h6>, and the margin-bottomof the <p> on the <div class="message">. Possibly first subtracting the padding you're adding.

Also, the first color: $warning-text; (right after background: $warning-background;) will be overruled/redifined by the one in h2, h3, h4, h5, h6.

OFF-TOPIC:
BTW, interesting how you're adding the

h2, h3, h4, h5, h6 {
    color: $warning-text;
 }

inside the

.message{
}

I would have done : .message > h2, h3, h4, h5, h6 outside of it.
Or & > h2, h3, h4, h5, h6 inside of it.
Will see how your way holds itself with other things.

[TheDutchCoder]

@andykirk yes that's exactly what I meant as well ;-)
<b> could be used as well, although I always find it an ambiguous element as far as semantics go. Then again, a warning message doesn't need a whole lot of semantic meaning to start with ;-)

[andykirk]

Yes, <b> is a very 'catchall' sort of element since it's been re-purposed. I do find an occasional use for it though.

[csswizardry]

Please see #291.

Thank you.