قم بإجراء مساحة بين الفقرة (X) HTML، CSS

Question

أريد مساحة بين بلدي <p>content</p> العلامات. ليس قبل وليس بعد <p> العلامات. FX الرمز الخاص بي هو:

<div>
   <h1>A headline</h1>
   <p>Some text</p>
   <p>Some text</p>
</div>
Something

لا أريد مساحة بين H1 و P التي تتم مع الهامش الصفر على H1. لكنني لا أريد مساحة بعد الأخير <p> بطاقة شعار. هل هذا ممكن بدون: الطفل الأخير أو بعض JS / JQUERY؟

لا يمكنني تعيين فئة = "الأخير" في العلامة الأخيرة لأنها نظام CMS.

Answer 1

p + p {
  margin-top: 1.5em;
} 

(على الرغم من أن هذا يتطلب متصفحا بدعم أفضل ل CSS من IE6)

Answer 2

إذا لم تكن مطلوبة لدعم IE6، فيمكنك استخدام:

div, h1, p { margin: 0; }
p + p { margin-top: 12px; }

إذا كنت بحاجة إلى دعم IE6، فهذا اختراق قذر ولكنه يعمل بدون جافا سكريبت:

div, h1, p { margin: 0; }
h1 { margin-bottom: -12px; }
p { margin-top: 12px; }

عيب هذه الطريقة هو أنه لا يمكنك استخدامه ببساطة، 1EM لهامش الموازنة لأن لديهم أحجام خطوط مختلفة. يمكنك إما ضبط يدويا كما هو مطلوب أو استخدام عرض البكسل.

Answer 3

قم بتعيين الهامش السفلي الافتراضي إلى P، ثم امنح العلامة الأخيرة للفئة بدون هامش أسفل.

Answer 4

<div>
   <h1>A headline</h1>
   <p>Some text</p>
   <div class="paragraph-space"></div>
   <p>Some text</p>
</div>

?

Answer 5

<div>
  <h1>A headline</h1>
  <p>Some text</p>
  <p style="margin-bottom: 0;">Some text</p>
</div>

Answer 6

إذا كنت ترغب في تحقيق المزيد من المتصفح متوافق، فيمكنك أيضا استخدام:

p { margin-top: 24px; }
h1 { margin-bottom: -24px; } // play with this value as necessary

سوف الهوامش السلبية سحب العناصر تجاههم. إنه موضعي مما أحب، ولكن عندما تكون تحت رحمة التعليمات البرمجية التي تم إنشاؤها بأي حال من الأحوال لإضافة فئات، يجب أن تكون مبدعا.