CSS additions for blockquote in javascript/jquery

Question

I have a couple lines in various paragraphs within span elements. My intent is to pull the text and dynamically add a blockquote element in my javascript using jQuery. Everything works as it should except for the styling, and I'm unsure why.

I'm not shooting for anything fancy - line above/below the text, indent, increase the font size.

When I apply the border, it applies to EACH LINE! And the margin only applies to the first line, not the whole element.

Any idea what I'm doing wrong here? I tried adding a class to the Q element as well, same results.

$(document).ready(function() {

$("span").each(function() {
    var quote = ($(this).text()); 
    quote = quote.substr(0,1).toUpperCase()+quote.substr(1); // Capitalize first letter
    quote = ("<q>"+quote+"</q>"); // add blockquote element to string
    $(this).parent().after(quote); // insert blockquote after parent of span
    $("q").css( {
    //  "border": "3px gray" ,
    //  "border-style": "ridge none",
        "font-size": "125%",
        "margin": "1em",
        "color": "red"
    });
}); // end each

}); // end ready

Answer 1

The q element is an inline element. Once you change the display to block or inline-block, your problem will be fixed.