<p>
と<div>
はどう違い<span>
ますか?
それらは同じ意味で使用できますか?
私は問題に直面しているので、<span>
マージンは機能していませんが、<div>
それは機能し<p>
ています..
<p>
と<div>
はどう違い<span>
ますか?
それらは同じ意味で使用できますか?
私は問題に直面しているので、<span>
マージンは機能していませんが、<div>
それは機能し<p>
ています..
p
およびdiv
要素はブロックレベルの要素でspan
あり、 はインライン要素であるため、スパンのマージンは機能しません。または、span
CSS を使用してブロック レベルの要素を作成することもできます。display: block;
span
display: inline-block;
それとは別に、これらの要素には特定のセマンティックな意味があり、段落に使用されるdiv
さまざまなネストされた要素を持つコンテンツのブロックに対してより適切に参照され、空の要素にすぎないため、SEO を念頭に置いて、適切なタグを使用する必要がありますたとえば、要素内でテキストをラップすることは、p
span
div
p
A<p>
にはテキストのパラグラフが含まれている必要があり<div>
ます<span>
。<p>
これは意味的に使用する方法ですが、使用するスタイルはCSS
あなた次第です。
<p>
と<div>
はデフォルトでブロック要素です。<span>
インライン要素です。
ブロック要素はブラウザーで改行で開始および終了しますが、インライン要素はそうではありません。「インライン」は、それらが現在の行の一部であることを意味します。
今日の複雑な Web デザインでは、これらの区別の目的はあまり明白ではありませんが、ドキュメントが基本的に画像で装飾されたテキストであった HTML (これらのタグの由来) の初期の時代を振り返ると、区別はより明確になります。
いずれにしても、CSS を使用すると、基本的にタグのすべてのプロパティをオーバーライドできます。したがって、 a を aまたは a の<span>
ように動作させたい場合は、以下を追加するだけです。<div>
<p>
span
{
display: block;
}
このコードを使用すると、水平マージンだけでなく垂直マージンも設定できます。
私は、要素が反対側のブロックレベル要素であり、インライン要素であるp
ともっと考えました。ただし、コードを記述すると、上下にスペースが必要になりますが、動作はそのようではありません。JS フィドルでのこの実験を確認してください。div
span
p
div