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(無言フォローもお気軽に)

コメント

  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をコピーしました