0

私の知る限り、pタグは段落を作成します。しかし、これらのタグが別の目的で使用されている HTML コードをよく見かけます。たとえば、Codecademy の演習で見つけました。

<div><p>Rex</p></div>

div {
    position: relative;
    display: inline-block;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    border: 2px solid black;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
}

div p {
    position: relative;
    margin-top: 40px;
    font-size: 12px;
}

この円の中心に Rex という名前の円を作成します: http://jsfiddle.net/cvT6E。しかし、Rex という単語は段落ではなく、単なる単語です。

pタグを置き換えようとするとspan(私にとってはより論理的だと思われます)、動作しません: http://jsfiddle.net/cvT6E/2/。なぜだめですか？

最後に、私は知りたいです：

1) この例でのpタグの使用は意味的に正しいですか? 2)タグをタグに置き換えた
ときに単語が中央に配置されないのはなぜですか?pspan

4

3 に答える 3

2

<p>最初に、がブロック レベルの要素であることを思い出してください。Mozilla はそれをうまく表現しています。これは、なぜそこに<p>中心があり、中心spanがないのかを説明しています。

さらに、<p>は段落用であるため、テキスト コンテンツを表すのにより適しています。そのため、セマンティックが保持されます。<span>HTML で使用できるセマンティック マークアップがない状況で使用することをお勧めします。あなたの場合、単語またはテキスト ブロックを表現する<span>ことは主張されていません。

必要な場合を除き、物事を複雑にすることはお勧めしませんが、別の考え方でこれにアプローチする可能性があることに感謝します。以下に示すように、マークアップを観察します。

<p><span>text</span></p>

これは基本的に同じ効果をもたらします。つまり、「Rex」という単語を円の中央に配置します。これ<p>は、ブロック レベルの要素であり、要素のコンテナーとして機能できるため<span>です。したがって、 は<span>のプロパティを効果的に継承します<p> 。これは、テキストが垂直方向に中央揃えされているという事実から明らかです。

ここに画像の説明を入力

は<span>逆にインライン要素であり、要素を結び付けるグルーパーと考えてください。一方、a<div>は理想的なコンテナーです。個人的には<span>、適切なマークアップ要素が見つからない場合や、<p>またはその他の特別なプロパティが必要ない場合に使用します。私<span>はそれが純粋で好きです。

その円の中心に「Rex」を厳密に使用したい場合は<span>、これを行うことができます。最後の 2 つのプロパティを使用すると、基本的にそれを行うことができます。出力は下の画像に示されています。

div span {
    position: relative;
    margin-top: 40px;
    font-size: 12px;
        display:inline-block; 
        vertical-align:middle
}

ここに画像の説明を入力

于 2014-06-11T18:11:33.277 に答える
1

p段落の表示によく使用されますが、デフォルトのプロパティにより、他の多くの用途にも使用できます。この場合、span には default があるため、span は機能しませんdisplay:inline。

于 2014-06-11T18:04:26.103 に答える