ویژگی shape-margin در CSS

shape-margin Property

ویژگی shape-margin در CSS اندازه margin را برای فرم (شکل) ایجاد شده توسط ویژگی shape-outside مشخص می کند.

نحوه نوشتار

shape-margin: 10px;
shape-margin: 20mm;
shape-margin: 60%;

ویژگی shape-margin این امکان را فراهم می کند تا فاصله بین لبه های شکلی که متن در مجاورت آن قرار گرفته است را مشخص کنیم.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="main">
      <div class="box">
        <img class="shape" src="http://my-project.ir/img/bridge.jpg" alt="" />
      </div>
      <p>
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک
        از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه
        شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی
        نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک
        برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا
        صرفا به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده
        بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و
        اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است. از آنجایی که طراحان عموما
        نویسنده متن نیستند و وظیفه رعایت حق تکثیر متون را ندارند و در همان حال
        کار آنها به نوعی وابسته به متن می‌باشد آنها با استفاده از محتویات
        ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند.
      </p>
      <hr />
      <div class="box">
        <img class="shape2" src="http://my-project.ir/img/bridge.jpg" alt="" />
      </div>
      <p>
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک
        از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه
        شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی
        نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک
        برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا
        صرفا به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده
        بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و
        اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است. از آنجایی که طراحان عموما
        نویسنده متن نیستند و وظیفه رعایت حق تکثیر متون را ندارند و در همان حال
        کار آنها به نوعی وابسته به متن می‌باشد آنها با استفاده از محتویات
        ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند تا مرحله طراحی.
      </p>
</div>

css

.main {
    width: 600px;
    direction: rtl;
    float: right;
}
.box {
    width: 200px; 
}
.shape,
.shape2 {
    float: right;
    width: 100%;
    shape-outside: polygon(
       30% 0%,
       70% 0%,
       100% 30%,
       100% 70%,
       70% 100%,
       30% 100%,
       0% 70%,
       0% 30%
     );
    clip-path: polygon(
      30% 0%,
      70% 0%,
      100% 30%,
      100% 70%,
      70% 100%,
      30% 100%,
      0% 70%,
      0% 30%
     );
}
.shape2 {
    shape-margin: 15px; 
}
p {
   direction: rtl;
   font-size: 13px;
   font-family: tahoma;
   text-align: justify;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی در CSS پشتیبانی می کنند.