نموذج صندوق CSS (الهوامش والحشو) للمباعدة الرأسي بين الفقرات
https://stackoverflow.com/questions/568561
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
كيف ينبغي استخدام هامش CSS و "الحشو" في التباعد الرأسي بين الفقاعات:
- هل يمكن تعريف المساحة الرأسية بين الفقرات باستخدام الحشو و / أو استخدام الهوامش؟
- إذا كان من الممكن القيام به إما، فما هو أفضل أو أكثر طبيعية للاستخدام؟
- هل تميل إلى تحديد الحشو غير الصفر و هامش غير صفري، وإذا كان الأمر كذلك، فما مقدار ذلك؟
ال مثال على الهوامش والحشو والحدود يفسر نظريا ما الفرق بين الهامش والحشد: أنا أستجس عند استخدام كل منها في التمرين, ، لتقديم صفحة طبيعية جيدة المظهر.
ثانيا، معمل علامة مثل ما يلي ...
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>
إذا كنت تريد المسافة الرأسية المتساوية بين كل فقرة و / أو عنصر قائمة، ثم:
- هل تميل إلى تحديد
<ul>كما وجود هامش صفر + حشوة خاصة بها؟ - أو سوف
<ul>عادة ما يكون له هامش غير صفر، والذي لن يكون له أي تأثير بعد ذلك لأن هذا الهامش سيتم انهار بهامش<li>داخل ذلك و<p>الذي يسبقها؟
ثالثا (ولست متأكدا ما إذا كان يجب أن أسأل هذا السؤال الثالث)، مواصفات الهوامش الانهيار يقول، "إذا كانت الهوامش العلوية والسفلية من المربع مجاورة، فمن الممكن أن ينهار الهوامش من خلالها". إذا كان لدي فقرة فارغة مثل واحدة التالية في الوسط ...
<p>Hello</p>
<p></p>
<p>World</p>
... ثم أتوقع أن أرى ذلك كفقرة فارغة، أي مع كمية إضافية من المساحة الرأسية بين Hello و ال World:
- ما الذي يمنع هامش هذه الفقرة الفارغة من الانهيار، وبالتالي فإن الفقرة الفارغة غير مرئية: هل هو الحشو غير الصفر الذي يفعل هذا؟
- في أي سيناريو يكون إنه مفيد لصندوق ليحتوي على الهوامش القوية والسفلية المجاورة التي تنهار؟
قد تكون الإجابات على أي أو كل هذه الأسئلة الثلاثة موضع ترحيب.
أنا لست مهتما بشكل خاص بمشاكل نموذجي محددة في IE في الوقت الحالي: بدلا من ذلك، أريد أن أعرف حول كيفية استخدام المعيار.
المحلول
للإجابة على سؤالك الأول، لا يهم عموما إذا كنت تستخدم الهامش أو الحشد لإضافة تباعد بين العناصر، ولكن إذا قمت بتطبيق حدود على عنصر واستخدام الحشو لجعل المساحة، فسوف يدفع الحد إلى حد بعيد.
للإجابة عليك القضية الثانية فقط إلقاء نظرة على هذا الرمز وربما تشغيلها معها:
<html>
<head>
<title>Box Model Tests</title>
<style type="text/css">
/* Just to get rid of the annoying padding/margin setting that is default
in most browsers on the body tag from messing up our experiments */
body{
margin: 0px;
padding: 0px;
}
p{
margin: 0px;
padding: 0px;
}
/* It appears that if you modify the ul padding it tends
to remove the bullet points, that is if you set the paddign to zero */
ul{
margin: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>
</body>
</html>
ضع في اعتبارك أنه في المثال فوق جميع المساحة المتبقية يجب أن تفعل مع خصائص الخط، والذي يمكن تغييره باستخدام نفس الأساليب مثل أي عنصر آخر.
والثالث:
أعتقد أن "Garrow" هو الصحيح في الفارغة <p>أنا لا أركض في هذه المشكلة التي غالبا ما أستخدمها <p> أقل وأقل في تخطيطاتي ولكن هذه المقالة بدا مثيرا للاهتمام للغاية، وأعتقد أن يعرض تفسيرا أفضل من W3C فعلت.
نصائح أخرى
للإجابة على الخاص بك 3rd. سؤال؛
الثاني <p> كعنصر مستوى كتلة فارغ ببساطة لن يتم تقديمه.
يمكنك إجبار العنصر المراد تقديمه أثناء إفراغ عن طريق إعطائه ارتفاع أو حشوة، أو بما في ذلك مساحة غير مكسرة داخل الفقرة. (ربما هناك طرق أخرى للقيام بذلك).
لا يبدو أن مساحة المسافة الطبيعية (مثل خطوط نيوتن أو علامات تبويب أو مسافات) تعمل في هذا الصدد.
تحرير رقم 2 :: لتوضيح بشكل صحيح كيف يعمل هذا كل شيء، احفظ هذا محليا ومعرفة ما يجعل مما يجعل.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
p { margin:10px; background-color:#ccc;}
p.padding { padding:5px; background-color:#eec; }
p.height { height:30px; background-color:#cee; }
</style>
</head>
<body>
<p>text</p>
<p class="padding">i have padding</p>
<p class="padding"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>5 empty paragraphs before this, only one will render. (it has padding)</p>
<p>& nbsp;</p>
<p> </p>
<p> </p>
<p>
</p>
<p>3 whitespace before me, one will render, it has &nbsp;</p>
<p class="height">im 30 px high</p>
<p class="height"></p>
<p></p>
<p></p>
<p>3 empty before me, 1 will show (it has height)</p>
<p>text</p>
<p>text</p>
</body>
</html>
HEHE، حسنا ... متصفحات الويب مختلفة، أود أن أقول إن ما تسير على ما يرام مع فايرفوكس عادة ما تسير على ما يرام مع المعيار ولكن هذا ليس صحيحا تماما أيضا.
وفقا ل XHTML1-Stration.dd فقطu003Cli/ style=";text-align:right;direction:rtl"> يمكن أن يكون الطفلu003Cul/ style=";text-align:right;direction:rtl"> وبعد أقترح عليك أن تحصل على مصمم يعرف عن المعايير. هذه مواصفات رسمية يمكنك التحقق من HTML معها.
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p> <!--illegal here-->
</li>
</ul>
ولكن العودة إلى سؤالك (الذي بالمناسبة هو ألم للإجابة). هناك العديد من الحالات التي تحدد فيها هامش غير صفر والحشو. أميل إلى تفضل الهامش الإضافي عند حاجة الحشو، ثم وسادة عندما لا يعمل الهامش. كل موقف مختلف وستحتاج إلى معرفة متى يفضل المرء.
لن أذهب إلى التفاصيل، لأنني أعتقد أنك على الطريق الصحيح هنا. استمر في التجربة وأنا أعلم أنك ستحصل عليه. ولكن ضع في اعتبارك أن متصفحات الويب تفعل الأشياء بشكل مختلف.
لست متأكدا من هذا الشيء الهامش الذي ينهار، لكن الفضاء الأبيض يحسب في بعض الأحيان كهامش. إذا حدث حفنة من العناصر دون مساحة بيضاء بينهما مختلفة في بعض الأحيان مما لو كان هناك مساحة بيضاء.
مرة أخرى، إنه الكثير الذي يجب اتخاذه حتى أذهب إلى التفاصيل، لكن ستحتاج إلى معرفة هذه الأشياء وستحصل على هذه المعرفة من خلال ممارسة.
ليست الهوامش فقرة وقائمة افتراضيا نفس متصفحات الصليب، عندما تبدأ في القيام بكل هذا التصميم الذي تريد تحديد مجموعة من قواعد CSS الأساسية لصفحتك. وإذا كنت تريد مساعدة على هوامش تعيين أقترح عليك إلقاء نظرة على شرائع بناء الصفحة.
p { margin: 1em 0; }
ul { margin: 1em 0; }
ul > li { margin: 1em 0; }
القواعد المذكورة أعلاه هي مجرد مثال ولكن ما يفعلونه هو أنهم يضمنون أن الهوامش العلوية والسفلية للفقرات وقائمة العناصر هي نفسها على الرغم من المتصفح. أشياء مثل هذا هو ما يجعل صفحتك تبدو نفس متصفحات الصليب.
استمر في اختبار الأشياء وقراءة مدونات CSS الممتازة هناك. طلب المساعدة عند الركض في حالات الحافة الغامضة حقا. لقد أمضى هؤلاء الأشخاص كثيرا من الوقت في محاولة حل وقديهم بشكل أفضل في تعلم كيف فعلوا ذلك من إعادة اختراع العجلة.
الشيء الرئيسي الذي تحتاج إلى معرفته هو أن الهوامش المجاورة (الرأسية) مجرد إذا كان لديك:
p { margin: 1em 0; }
...
<p>Paragraph one</p>
<p>Paragraph two</p>
الفضاء بينهما سيكون 1EM وليس 2EM.
الحشو منفصل. إذا كانت الفقرات حشو، فستكون داخل صناديقها. مصدر الحقيقة لكل هذه الأشياء هو معيار W3C CSS. علي سبيل المثال، الهوامش الانهيار:
في هذه المواصفات، التعبير الهوامش الانهيار يعني أن الهوامش المجاورة (لا توجد مناطق حشو أو مناطق حدودية منفصلة منها) من صناديق أو أكثر (قد تكون بجوار بعضها البعض أو المتداخلة) لتحديد هامش واحد.
في CSS2، الهوامش الأفقية لا تنهار أبدا.
قد ينهار الهوامش العمودي بين صناديق معينة:
- هوامش رأسية مجاورة أو أكثر من صناديق كتلة في انهيار التدفق العادي. عرض الهامش الناتج هو الحد الأقصى لعرض الهامش المجاور. في حالة الهوامش السلبية، يتم خصم الحد الأقصى المطلق لهوامش المجاورة السلبية من الحد الأقصى من الهوامش المجاورة الإيجابية. إذا لم تكن هناك هوامش إيجابية، فإن الحد الأقصى المطلق لهوامش المجاورة السلبية يتم خصمها من الصفر.
- الهوامش الرأسية بين مربع طرح وأي مربع آخر لا تنهار.
- الهوامش من الصناديق المطلقة والموقع نسبيا لا تنهار.
يرجى الرجوع إلى أمثلة الهامش والحشو والحدود لتوضيح الهوامش المنهارة.
الحدود مختلفة قليلا، لا سيما في الجداول حيث يمكنهم الانهيار إلى بعضهم البعض أو لا اعتمادا على CSS.
الآن لا تنتهي القصة بالطبع. يمكن أن تختلف المتصفحات حول كيفية حساب مجموعات من العرض والهوامش والحدود والحشو ولكن هذا يتضاءل إلى حد كبير من خلال إجبار المتصفحات في وضع المعايير (مع DocType) وموضوع كبير في حد ذاته (كما هو ما تفعله لتقليل هذه الأنواع مشاكل).
