3

これは非常に基本的な CSS 設計の質問です。

2 つのブロック要素がある場合

+----------+    +----------+                      
|~~~~~~~~~~|    |**********|                      
|~~~~~~~~~~|    |**********|                      
|~~~~~~~~~~|    |**********|                      
+----------+    +----------+

それらの間にスペースを設定したいのですが、3つの可能性があります：

  1. 右マージン付きの左ブロック
  2. 左マージンのある右ブロック
  3. 両方のブロックの証拠金

それぞれの長所と短所は何ですか? また、最も重要なのは、ベスト プラクティスと見なされるものは何ですか?

4

4 に答える 4

1

賛否両論はありません。それは完全にあなたのデザイン次第です。あなたが何をしたいのか、を使用margin-rightすると、正当な理由もなく最後の要素margin-rightが表示されます。たとえば、3 つのボックスがあり、左にフロートしている、またはそれらが表示されているとします。inline-block右マージンがあるため、最後のボックスはテンプレートの右端に触れず、代わりに折り返されて下に移動します。

ここに画像の説明を入力

赤いスペースが見えますか、それmargin-rightは最後の要素のためのもので、必要ありません. さらにシフトすると、div下に移動します。

解決？

レガシー ブラウザをサポートしたい場合は、最後の要素にクラスを割り当てて と書きますmargin-right: 0;。たとえば、3 つliの要素をフローティングにするので、次のように書きます。

ul.class_name li.class_name {
   margin-right: 0;
}

:last-childそれ以外の場合は、余分なマージンを取り除くために pseudo を使用できます。

そうなる

ul.class_name li:last-child {
   margin-right: 0;
}

左でも同じことが言えますが、and を使用する代わりに:last-child、それぞれandmargin-rightを使用する必要があります。margin-left:first-child

最後になりましたが、両側にマージンを使用すると、両側にスペースが作成され、レイアウトの方向性が失われます。

ここに画像の説明を入力

上記の場合、両方を使用する必要があります。クラスを最初と最後の要素に割り当てるか、最初の要素と最後の要素で and を使用して:first-child取り除く必要:last-childがあります。marginleftmarginright

結論: あなたが持っている 2 つのボックスの場合、またはをmargin-right 使用して最後の要素の余分なものを削除する必要があります。class:last-childmargin

于 2013-10-24T07:47:35.067 に答える
1

一般に、方向 (margin-left または margin-right) を選択し、プロジェクト全体でその方向に固執することをお勧めします。これにより、デザインがより簡単で一貫したものになります。

このテーマの詳細については、このブログ投稿を読むことができます:一方向マージン宣言

そうは言っても、ボックスのマージン左は「前のボックスに近づきすぎたくない」ことを意味し、マージン右は「他のボックスが近づきすぎたくない」ことを意味します。

したがって、デフォルトでボックスにマージンがあるデザインでは、margin-right (および margin-bottom) を使用し、デフォルトでボックスにマージンがないデザインでは、いくつかのマージンのあるボックスで margin-left (および margin-top) を使用します。それが混在している場合は、最も首尾一貫していると思われる方向を選択し、それに固執してください。

于 2013-10-24T07:58:56.557 に答える
0

簡単な答え: 場合による

それはすべて、あなたがやろうとしていることと、それらがどの要素であるかによって異なります。

たとえば、サイトが左向きで、それらが同じクラスの 2 つのフローティング div である場合margin-left、最初のブロックの左側にスペースが生じるため、 を使用したくないでしょう。

間に表示される可能性のある動的コンテンツがない限り、両方の要素にマージンを追加することは明らかに意味がありません。

したがって、ページに必要な明らかなスタイル設定方法以外は、パフォーマンスに違いはありませんが、ほとんどの場合、コードの読みやすさに違いはありません

于 2013-10-24T07:44:28.273 に答える
0

どこで使用するか、どのように使用するかによりますが、正確なルールはありません。ただし、要素にグリッド システムを使用する場合は、それがベスト プラクティスです。要素がグリッド システムに適していない場合は、任意のアプローチを使用できます。

PSそして、私が推測する前または後に疑似要素を使用する別の可能性があります。

于 2013-10-24T07:43:11.857 に答える