shape-margin

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

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

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

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

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

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

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

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

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

این ویژگی مقادیری با تمام واحدهای طولی و همچنین درصد می پذیرد.

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

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

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

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

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