کار با ویژگی margin و padding در CSS و بررسی تفاوت آنها
به یکی دیگر از جلسات دوره آموزش قدم به قدم HTML و CSS خوش آمدید. در این جلسه به دو ویژگی مهم در CSS، یعنی ویژگی margin و padding می‌پردازیم. اما قبل از اینکه به سراغ کار با این ویژگی‌ها در CSS برویم می‌خواهیم درمورد ساختار عناصر HTML صحبت کنیم.
در این جلسه می‌خوانید:
ساختار عناصر HTML
هر عنصر HTML که در خروجی نمایش داده می‌شود (بعضی از عناصر مانند تگ head در خروجی نمایش داده نمی‌شوند) دارای ساختار مشخصی است. داخلی‌ترین بخش هر عنصر، محتوای درون آن است. به مثال زیر توجه کنید:
1 | <p style="background-color:pink;"> من یک پاراگراف هستم </p> |
خروجی کد بالا:
من یک پاراگراف هستم
در این مثال، عنصر p به اندازه محتوای درونش (یعنی عبارت من یک پاراگراف هستم) حجم گرفته است. کل حجمی که با رنگ صورتی مشخص شده به عنوان بخش محتوا (content) عنصر p درنظر گرفته می‌شود.
بخش دیگری که می‌توان برای عناصر درنظر گرفت، border یا قاب است، درمورد border در جلسه‌ای جداگانه بصورت مفصل صحبت می‌کنیم، اما در اینجا فقط خروجی مثال زیر را مشاهده کنید:
1 | <p style="background-color:pink; border:solid 5px black;"> من یک پاراگراف هستم </p> |
خروجی کد بالا:
من یک پاراگراف هستم
در این مثال برای عنصر p موردنظر، یک قاب تعریف کردیم. قاب یا همان border دقیقا در لبه‌ی عناصر HTML نمایش داده می‌شود.
تا اینجا دو جزء مهم از عناصر HTML را یاد گرفته‌اید. ۲ جزء دیگر مربوط به ویژگی margin و padding می‌شود که در ادامه به بررسی آنها می‌پردازیم.
کار با ویژگی padding
با استفاده از ویژگی padding در CSS می‌توانیم حاشیه درونی عناصر را تنظیم کنیم. به مثال زیر دقت کنید:
1 | <p style="background-color:pink; border:solid 5px black; padding:20px;"> من یک پاراگراف هستم </p> |
خروجی کد بالا:
من یک پاراگراف هستم
اگر به خروجی کار دقت کنید، متوجه فاصله‌ای که عبارت “من یک پاراگراف هستم” از لبه‌ی عنصر p گرفته است می‌شوید. در واقع ویژگی padding فاصله بین بخش content و بخش border را تعیین می‌کند.
در مثال بالا به ویژگی padding تنها یک پارامتر (20px) داده شده است. اما این ویژگی می‌تواند بصورت چند پارامتری هم مقداردهی شود. در زیر انواع مقداردهی به ویژگی padding را همراه با توضیح آن آورده‌ایم.
تک پارامتری: اگر به ویژگی padding تنها یک مقدار داده شود (مانند مثال بالا) این مقدار برای چهار جهت عنصر (بالا، پایین، چپ، راست) در نظر گرفته می‌شود. در مثال بالا، عنصر p از چهارجهت خود مقدار 20px حاشیه از درون (padding) گرفته است.
دو پارامتری: اگر به ویژگی padding دو مقدار داده شود. مقدار اول برای جهات Y (بالا و پایین) و مقدار دوم برای جهات X (چپ و راست) در نظر گرفته می‌شود. برای درک بهتر به مثال زیر دقت کنید:
1 | <p style="background-color:pink; border:solid 5px black; padding:5px 30px;"> من یک پاراگراف هستم </p> |
خروجی کد بالا:
من یک پاراگراف هستم
همانطور که می‌بینید عبارت “من یک پاراگراف هستم” از بالا و پایین 5px و از چپ و راست خود 30px فاصله گرفته است.
چهار پارامتری: اگر به ویژگی padding چهار مقدار مختلف داده شود. اولین مقدار برای جهت بالا (top)، دومین مقدار برای جهت راست (right)، سومین مقدار برای جهت پایین (bottom) و چهارمین مقدار برای جهت چپ (left) درنظر گرفته می‌شود. به مثال زیر دقت کنید:
1 | <p style="background-color:pink; border:solid 5px black; padding:5px 20px 30px 0px;"> من یک پاراگراف هستم </p> |
خروجی کد بالا:
من یک پاراگراف هستم
در این مثال حاشیه درونی (padding) عنصر p موردنظر از بالا 5px از سمت راست 20px از سمت پایین 30px و از سمت چپ 0px تنظیم شده است.
علاوه بر این، چهار ویژگی دیگر هم وجود دارند که از ویژگی padding مشتق شده‌اند. این ویژگی‌ها می‌توانند برای مواقعی که قصد دارید تنها برای یکی از جهات ویژگی padding را تنظیم کنید مناسب باشند. همچنین این ویژگی‌ها تنها یک مقدار دریافت کنند.
ویژگی‌های مشتق شده از ویژگی padding:
- ویژگی padding-top (حاشیه درونی از بالا)
- ویژگی padding-bottom (حاشیه درونی از پایین)
- ویژگی padding-left (حاشیه درونی از چپ)
- ویژگی padding-right (حاشیه درونی از راست)
کار با ویژگی margin
با استفاده از ویژگی margin در CSS می‌توانیم حاشیه بیرونی عناصر را تنظیم کنیم. به مثال زیر دقت کنید:
1 | <p style="background-color:pink; border:solid 5px black; margin:20px;"> من یک پاراگراف هستم </p> |
خروجی کد بالا:
من یک پاراگراف هستم
اگر به خروجی کار دقت کنید، متوجه فاصله‌ای که از لبه‌ی عنصر p ایجاد شده می‌شوید. در واقع ویژگی margin فاصله از border تا دیگر عناصر اطراف را تعیین می‌کند.
ویژگی margin هم می‌تواند دقیقا مانند ویژگی padding بصورت تک پارامتری، دو پارامتری و چهار پارامتری مقداردهی شود. جهت‌هایی که برای پارامترهای مختلف درنظر گرفته شده هم دقیقا مانند ویژگی padding است. از این رو دیگر این جهات برای ویژگی margin توضیح داده نمی‌شود.
به مثال زیر دقت کنید:
1 | <p style="background-color:pink; border:solid 5px black; margin:0px 30px 20px 20px;"> من یک پاراگراف هستم </p> |
خروجی کد بالا:
من یک پاراگراف هستم
در این مثال حاشیه بیرونی (margin) عنصر p موردنظر از بالا 0px از سمت راست 30px از سمت پایین 20px و از سمت چپ 20px تنظیم شده است.
علاوه بر این، چهار ویژگی دیگر هم وجود دارند که از ویژگی margin مشتق شده‌اند. این ویژگی‌ها می‌توانند برای مواقعی که قصد دارید تنها برای یکی از جهات ویژگی margin را تنظیم کنید مناسب باشند. همچنین این ویژگی‌ها تنها یک مقدار دریافت کنند.
ویژگی‌های مشتق شده از ویژگی margin:
- ویژگی margin-top (حاشیه بیرونی از بالا)
- ویژگی margin-bottom (حاشیه بیرونی از پایین)
- ویژگی margin-left (حاشیه بیرونی از چپ)
- ویژگی margin-right (حاشیه بیرونی از راست)
باسلام
آموزش عالی فقط برای تکمیل این بخش بهتره حالت های border رو هم معرفی کنید
با تشکر
عالی