حاشیه ها در CSS



مفهوم حاشیه چیست؟ به عبارت ساده، حاشیه فاصله بین یک عنصر و محیط اطراف آن است. در واقع، حاشیه فضای خالی اطراف یک عنصر را افزایش یا کاهش می دهد. توجه داشته باشید که وقتی می گوییم فضای اطراف یک عنصر، به معنای فضای خارج از هر چیزی که متعلق به عنصر است، مانند حاشیه است. حال می خواهیم بدانیم برای دادن حاشیه از چه دستوری استفاده کنیم؟ عناصر را می توان در هر چهار طرف حاشیه کرد. یعنی از بالا، راست، پایین یا چپ می توانیم حاشیه های مختلفی بدهیم. برای این کار می توانیم از دستورات زیر استفاده کنیم: margin-top: px ; margin-right: px ; margin-bottom: px ; margin-left : px ; مثلاً پاراگراف زیر 30 پیکسل از سمت راست جدا شده است: P{background-color: pink;margin-right: 30px ;}نکته بسیار مهم این است که حاشیه ها علاوه بر مقادیر مثبت، می توانند مقادیر منفی نیز بگیرند. واضح است که اگر به عنصری مقدار حاشیه مثبت بدهیم، عناصر را از آن دور می کند، اما اگر مقدار منفی بدهیم، عناصر را به آن نزدیک می کند. همانطور که از دستورات خلاصه در قسمت مرزها متوجه شدیم در قسمت حاشیه ها می توانیم چندین دستور مربوط به حاشیه ها را در یک عنصر خلاصه کنیم تا کدنویسی بهینه شود. مثال: P{زمینه-رنگ: صورتی; حاشیه: 10px 30px 40px 20px ;} این پاراگراف 10px از سمت بالا 30px از سمت راست، 40px از سمت پایین و 20px از سمت چپ است. توجه داشته باشید که ممکن است عناصر دیگری در اطراف یک عنصر وجود داشته باشد یا هیچ عنصری وجود نداشته باشد. برای حالت سه مقدار، مقدار اول مربوط به حاشیه بالا، مقدار دوم مربوط به حاشیه راست و چپ، و مقدار سوم مربوط به حاشیه خواهد بود پایین. و برای حالت دو مقداری، مقدار اول مربوط به حاشیه بالا و پایین و مقدار دوم مربوط به حاشیه راست و چپ است. واضح است که اگر فقط یک مقدار به حاشیه بدهیم از چهار طرف با آن مقدار جدا می شود. برای مقدار margin می توانیم از یک مقدار عددی مانند 20px و… استفاده کنیم یا از درصد استفاده کنیم که در این صورت حاشیه بر اساس درصدی از عرض عنصر تعیین می شود. همچنین می توانیم از مقدار auto استفاده کنیم که در این صورت مرورگر عنصر را در وسط عنصر والد خود قرار می دهد. همچنین می توانیم از مقدار inherit استفاده کنیم که در این صورت مقدار حاشیه عنصر برابر با مقدار حاشیه والد آن خواهد بود. در این صورت می گوییم که عنصر حاشیه را از پدر خود به ارث می برد. خطای حاشیه جمع شدنی فرض کنید به یک عنصر حاشیه کمتری 40 پیکسلی داده ایم و سپس به عنصر زیر آن عنصر حاشیه بالایی 60 پیکسلی داده ایم. حال یک سوال پیش می آید. فاصله بین این دو عنصر چقدر خواهد بود؟ در چنین شرایطی همیشه حاشیه بزرگتری اعمال خواهد شد. یعنی در این مثال، حاشیه بین دو عنصر 60 پیکسل است. توجه داشته باشید که این فقط برای حاشیه های بالا و پایین است و برای حاشیه های راست و چپ اتفاق نمی افتد.

دیدگاهتان را بنویسید