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(無言フォローもお気軽に)
コメント
[…] Microsoft Edgeにおけるcode要素とpre要素の違いをF12ツールで調べました。フォントはChromeと同様にcodeとpreで共通でした。 […]
[…] Firefoxにおけるcode要素とpre要素の違いをF12ツールで調べました。Chrome、Edgeと同様、フォントはcodeとpreで共通でした。 […]
[…] code要素とpre要素の違いに関する調査結果（Chrome, Microsoft Edge, Firefox）をまとめます。 […]