CSS, متداخلة divs & هوامش مقابلالحشو
https://stackoverflow.com/questions/1419519
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أنا أفهم تماما نموذج مربع.هذا السؤال هو أكثر عن محاولة دبوس أسفل الدلالي منهجية بشأن عند استخدام الهوامش عند استخدام الحشو.
هنا هو مثال نموذجي ،
أولا ، في سهل الانجليزية:
- الحالة:لدينا وعاء div, يوجد بداخله عنصر الفقرة.
الهدف:أن يكون 12بكسل الفضاء بين داخل div وخارج الفقرة.
الخيار أ) تطبيق 12بكسل من الحشو في وعاء div
- الخيار ب) تطبيق 12بكسل هوامش الفقرة عنصر
أو, إذا كنت تفضل, HTML:
<div id="container">
<p>Hello World!</p>
</div>
و CSS:
الخيار أ)
div#container {padding: 12px;}
الخيار ب)
p {margin: 12px;}
هتاف!
جون
المحلول
أنا شخصياً أفضّل الخيار أ.لماذا؟لنفترض الآن أنه يتعين علي إضافة عناصر HTML أخرى إلى القسم وأريد الحفاظ على المساحة المتروكة، ولن أضطر إلى إضافة قواعد أخرى إلى ملفات CSS الخاصة بي حتى تعمل.
نصائح أخرى
تعطي الحواشي والهوامش نفس التأثير، باستثناء الحالات التالية (قد أفتقد بعضها):
- لديك نوع من خصائص الخلفية.الهوامش لن تحصل عليها.
- لديك الحدود
- تستخدم TD (بدون هوامش)
- عنصران متداخلان، يتم طي الهوامش معًا، بينما لا تكون الحشوات كذلك.
- (بحاجة إلى التحقق من هذا) ربما تؤثر على عرض العنصر وارتفاعه بشكل مختلف.(إذا كان شخص ما يعرف أفضل، الرجاء تعديل هذا).
هذا هو الخلل في css ، وإليك الأمثلة:
http://creexe.zxq.net/div-issue-padding.html = قضية الحشو
http://creexe.zxq.net/div-issue-margin.html = هامش المسألة
الأحمر و الأخضر div العلامات في الأمثلة التي تم إنشاؤها بواسطة خاصية css أعلى ، ولكن له عيوبه الخاصة به athat أعلى ، أسفل إلخ يعمل فقط عند موقف div المطلق و النسبي ، ولكن ليس ثابت
يعتمد ذلك على ما تحاول تحقيقه بصريًا.كان container هل لديك عناصر فرعية أخرى قد تتدلى في الحضيض على جانبي الفقرة؟إذا كان الأمر كذلك، فإن الهامش منطقي أكثر.لكن اذا container يجب أن يحتوي على 12 بكسل لجميع العناصر، فمن المنطقي استخدام الحشو لتجنب الاضطرار إلى تطبيق الهوامش على مجموعات عناصر متعددة.
بشكل عام، تريد دائمًا أن تحتوي الفقرات على هوامش رأسية لضمان تناسق المسافة بين الفقرات.
أنا شخصياً سأختار الخيار أ #container {padding: 12px;} لأنه يوضح ذلك بشكل واضح الجميع يجب أن تظل العناصر الفرعية على بعد 12 بكسل من حدود هذا القسم.
إذا كنت أريد أن تبقى العناصر الأخرى على بعد أكثر من 12 بكسل من #containerحدود ، ثم أقوم بتطبيق هامش أكبر بكثير على هذا العنصر.
هتافات!
الحشو العمودي على القسم - لأنني إذا قررت أنني أريد مقدارًا مختلفًا من المسافة الرأسية بين الفقرات المتعددة، فسأستخدم الهوامش السفلية، وستظل الحشوة العلوية/السفلية للقسم المتضمن إلى حد كبير دائمًا سليمة على افتراض أن لديك فقط العناصر الموضوعة بشكل ثابت في الداخل.
الفرق هو أين تقع الحدود.
تقع الحدود SMACK DAB في منتصف الهوامش والحشو.إذا قمت بتحديد الهوامش، فهذه مسافة بيضاء خارج الحدود.
إذا قمت بتحديد الحشو، فهذه مسافة بيضاء داخل الحدود (تدفع الحدود بعيدًا عن العنصر)
لا يمكن أن تظهر لك هنا بسبب تجريد CSS، ولكن جرب هذا:
<body style="background-color: #aaa"> <p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;"> i have margins, padding and a border. </p> <p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;"> i have margins, and a border. </p> <p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;"> i have padding and a border. </p> </body>
اشياء اخرى!
الحشو يجلب لون خلفية العنصر، والهوامش شفافة بشكل أساسي
يبدو أن بعض العناصر (مثل td) تتجاهل الهوامش، بينما تستجيب للتغيرات في المساحة المتروكة
