shape-margin

با استفاد از ویژگی shape-margin می توان یک فاصله بیرونی به عنصری که شکلی توسط ویژگی shape-outside روی آن اعمال شده است، ایجاد کرد.

زمانی که از ویژگی shape-outside استفاده می کنیم احتمال اینکه محتوای اطراف عنصر به آن بچسبند وجود دارد و این مورد منظره جالبی برای کاربر بوجود نمی آورد. بهتر است کمی فاصله بین عنصر و محتوای جمع شده در اطراف آن وجود داشته باشد. این فاصله توسط ویژگی shape-margin بوجود می آید.

در واقع ویژگی shape-outside باعث می شود تا شکل جدیدی اطراف عنصر بوجود آید که از شکل قبلی به اندازه ای که برای این ویژگی تعیین می شود فاصله دارد و این فاصله باعث می شود تا محتوا از عنصر دور شود و ظاهر بهتری به طرح ما بدهد.

 
shape-margin در سی اس اس
 

به عنوان نمونه مثال زیر را در نظر بگیرید که در آن تصویر گل بصورت شناور در صفحه جای گرفته و محتوا اطراف آن جمع شده است و ما از روش خودکار ویژگی shape-outside استفاده کرده ایم:


img {
  float: right;  
  shape-outside: url(flower.png);   
}

خروجی بصورت زیر می باشد:

 
استفاده از ویژگی shape-outside بدون shape-margin
 

همانطور که مشاهده می کنید ظاهر جالبی ندارد و ما می توانیم از ویژگی shape-margin در اینجا بهره ببریم:


img {
  float: right;  
  shape-outside: url(flower.png);   
  shape-margin: 1em;
}

و خروجی ظاهر مناسب تری به خود خواهد گرفت:

 
استفاده از تصویر برای ویژگی shape-outside
 

اگر از درصد برای اندازه دهی استفاده کنیم مقدار آن نسبت به اندازه عرض عنصر محاسبه خواهد شود.

این ویژگی مانند ویژگی margin چندین مقدار نمی پذیرد بلکه فقط یک مقدار می پذیرد و آن مقدار هم باید عددی مثبت باشد.

نکته دیگری که باید در زمان استفاده از این ویژگی در نظر بگیریم این است که وقتی مقدار shape-margin به درستی اعمال می شود که در سیستم مختصات فضا برای آن وجود داشته باشد. به عنوان مثال فرض کنید دایره ای بوجود آورده ایم که چارچوب مرجع آن نیز مقدار پیشفرض یا همان margin-box است. این یعنی دایره ما فضای مربوط به فاصله بیرونی یا همان Margin را نیز می پوشاند. با این شرایط اگر دایره را طوری تعریف کنیم که تمام سیستم مختصات (کل فضای عنصر) را بپوشاند دیگر جایی برای اعمال Margin توسط shape-margin باقی نمی ماند.

به تصویر متحرک زیر توجه کنید. در این تصویر دایره شعاع 50 درصد دارد یعنی کل فضای سیستم مختصات را گرفته است. با اعمال مقدار کمی فاصله بیرونی مشاهده می کنید که محتوای اطراف شکل از حالت دایره ای شکل خارج می شوند و کم کم به مربع شکل تبدیل می شوند این بدین دلیل است که فضایی برای فضایی بیرونی روی سیستم مختصات شکل باقی نمانده است:

 
shape-margin در سیستم مختصات شکل
 

پشتیبانی مرورگر ها

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *