CSS: "alert" is missing "margin-top"

[mgeier]

Currently, the alert class has only margin-bottom (I guess this comes from bootstrap):

.alert {
    margin-bottom: 18px;
}

Since most other elements use only margin-top, those alert boxes are much too close to whatever comes before them.

Probably something like this could be added:

.rendered_html * + .alert {
    margin-top: 18px;
}

... or it could just be added unconditionally, like the original margin-bottom:

.alert {
    margin-top: 18px;
}

But probably the best solution would be, to overwrite the original margin-bottom and just do the same as with plain old <p>:

.rendered_html .alert {
    margin-bottom: initial;
}
.rendered_html * + .alert {
    margin-top: 1em;
}

[ellisonbg]

Yeah, I have seen this before and we should fix it. Can you add some
screenshots to help design review?

On Tue, Apr 26, 2016 at 2:21 AM, Matthias Geier notifications@github.com
wrote:

Currently, the alert class has only margin-bottom (I guess this comes
from bootstrap):

.alert {
margin-bottom: 18px;
}

Since most other elements use only margin-top, those alert boxes are much
too close to whatever comes before them.

Probably something like this could be added:

.rendered_html * + .alert {
margin-top: 18px;
}

... or it could just be added unconditionally, like the original
margin-bottom:

.alert {
margin-top: 18px;
}

But probably the best solution would be, to overwrite the original
margin-bottom and just do the same as with plain old

:

.rendered_html .alert {
margin-bottom: initial;
}.rendered_html * + .alert {
margin-top: 1em;
}

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#1390

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
bgranger@calpoly.edu and ellisonbg@gmail.com

[mgeier]

Sure, why not.

before:

after:

[mgeier]

I've created a PR: #1396.
I hope I added it in the right place ...

[willingc]

Thanks for the PR @mgeier and for improving the visual output. 🍰