code要素とpre要素の違い(Chromeの場合)| CSS

Chromeにおけるcode要素とpre要素の違いをF12ツールで調べました。

Chromeのバージョン: 76.0.3809.132

それぞれのデフォルトCSS

code {
    font-family: monospace;
}

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}

共通点は、font-familyがmonospaceであること。
相違点は、code要素がインライン要素であるのに対し、pre要素はブロック要素
さらに、pre要素ではスペース・改行が維持され、上下にマージンが取られる。

おわりに

今回は結果のみ示します。
これからは、code要素とpre要素の違い、及び、font-familyについて調べていく予定です。
では。


YouTube: ミサキさん

問い合わせ先
Mail: caprico.aries@gmail.com
Twitter: https://twitter.com/caprico_aries(無言フォローもお気軽に)

スポンサーリンク
記事を書いている人
ミサキ

プログラマ(@東京の国立研究所)として働きながら,占い師(の卵)としても活動しています.そのため,占いモニターを定期的に募集しています!⇒占いモニターのページ.実は,天文学の博士でもあります☆彡

詳しいプロフィールはこちら

ミサキをフォローする
WordPress
スポンサーリンク
ミサキをフォローする
プログラマー&天文博士&占い師 ミサキのブログ

コメント

  1. […] Microsoft Edgeにおけるcode要素とpre要素の違いをF12ツールで調べました。フォントはChromeと同様にcodeとpreで共通でした。 […]

  2. […] Firefoxにおけるcode要素とpre要素の違いをF12ツールで調べました。Chrome、Edgeと同様、フォントはcodeとpreで共通でした。 […]

  3. […] code要素とpre要素の違いに関する調査結果(Chrome, Microsoft Edge, Firefox)をまとめます。 […]

タイトルとURLをコピーしました