javascript/jqueryのblockquote用CSSの追加

Question

私はスパン要素内のさまざまな段落にいくつかの行があります。私の目的は、テキストを引っ張って、javascriptでjQueryを使ってブロッククォート要素を動的に追加することです。スタイリング以外はすべてが機能しますが、その理由は分かりません。

私は何かの空想的な行為はしていません。テキストの上下にインデントし、フォントサイズを大きくします。

ボーダーを適用すると、各行に適用されます！マージンは最初の行にのみ適用され、要素全体には適用されません。

ここで間違っているのは何ですか？ Q要素にもクラスを追加しようとしましたが、同じ結果が出ました。

$(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

q要素はインライン要素です。ディスプレイをblockまたはinline-blockに変更すると、問題は解決されます。