box modeling

حاشیه عناصر border , outline , box-shadow

بعد از بررسی عرض و ارتفاع در مدل باکس ها در html می خواهیم به حاشیه های یک عنصر بپردازیم. حاشیه عناصر html می تواند شامل کادر (border) خط خارجی (outline) سایه (box-shadow) و یا حاشیه خارجی و داخلی باشد. برخی از این ویژگی ها برای قرار دادن عنصر یا محتوای آن در محل خاص و برخی دیگر برای مشخص کردن عمق و محدوده عنصر می باشند.

 

تفاوت margin و padding

با این دو پارامتر شما می توانید محل قرارگیری عناصر و یا محتوای هر عنصر را تغییر داده و به محل مورد نظرتان انتقال دهید. این دو ویژگی همان طور که در فوق نیز به آن اشاره شد دور تا دور یک عنصر را از داخل و خارج آن فرا گرفته و شما می توانید آن ها را به دو صورت مقدار دهی کنید، به صورت تکی یا کلی که در زیر به آن اشاره کردیم :

  • padding-top:value; padding-right:value; padding-bottom:value; padding-left:value;
  • padding : padding-top(value) padding-right(value) padding-bottom(value) padding-left(value)
  • margin-top:value; margin-right:value; margin-bottom:value; margin-left:value;
  • margin : margin-top(value) margin-right(value) margin-bottom(value) margin-left(value)

توجه margin در عناصر inline و padding در عناصری که خاصیت box-sizing در آن ها مقدار border-box نیست میتوانند شما را به چالش بکشند!

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

  • child element{
  • margin: 0 auto; or  margin-right:auto; margin-left:auto;
  • }

مقادیری که ویژگی های margin و padding می توانند دریافت کنند مقادیر عددی با واحد های اندازه گیری مطلق و نسبی می باشkد مثلا :

  • margin : 1px 2% 1em 2pt;
  • padding : 1vw 2vh 1cm 1in;

border و outline چه فرقی دارند؟

یکی از راههایی که در زمان کدنویسی سند html، برای درک بهتر از محل قرارگیری عناصر می توان از آن استفاده نمود، دادن یک کادر به عناصر می باشد. border و outline می تواند تنها یک طرف از عناصر یا هر چهار ضلع عنصرها را کادر بندی نمایند. در زیر تمامی ویژگی های مربوط به کادربندی را مشاهده می کنید :

 

Property Description
border تمام خصوصیات مرزی را در یکجا تنظیم می کند
border-bottom تمام خصوصیات کادر پایینی را در یکجا تنظیم می کند
border-color رنگ کادر را تنظیم می کند
border-radius خواص شعاعی را برای گوشه ها جمع می کند
border-right تمام خصوصیات کادر راست را در یکجا تنظیم می کند
border-style نوع سبک کادر را تنظیم می کند
border-top تمام خصوصیات کادر بالایی را در یکجا تنظیم می کند
border-width میزان ضخامت کادر را مشخص می کند
outline تمام خصوصیات مرزی را در یکجا تنظیم می کند
outline-color رنگ خط خارجی را تنظیم می کند
outline-offset فضای بین یک طرح و لبه یا مرز یک عنصر را مشخص می کند
outline-style نوع سبک خط خارجی را تنظیم می کند
outline-width میزان ضخامت خط خارجی را مشخص می کند

که اکثر ویژگی هایی که به صورت تکی می توان برای border و outline در نظر گرفت در دو ویژگی اصلی قابل تعریف می باشند که در زیر طریقه ایجاد این دو ویژگی را برای شما آورده ایم :

  • border: border-width border-style border-color |initial|inherit;
  • outline: outline-width outline-style outline-color |initial|inherit;

همان طور که در بالا مشاهده کردید دو ویژگی border و outline سه پارامتر را در نظر می گیرند ضخامت، نوع سبک و رنگ کادر که برای هر کدام نیز یک ویژگی جداگانه وجود دارد. در ادامه برخی از استایل هایی که می توانید با این خاصیت ها ایجاد نمایید را ملاحضه می فرمایید.


نتایج با style های داده شده به صورت زیر خواهد بود:
محتوا محتوا محتوا محتوا

html
<div>محتوا</div>
style:
div{background-color:gray;
border-bottom:dashed 4px green}
div{background-color:cornflowerblue;
border-right:solid thick red}
div{background-color:yellowgreen;
border:dotted thin blue}
div{background-color:yellow;
border-radius:3vw}


box-shadow

عمق دادن به عناصر و صفحات html می تواند به زیبایی کار شما بیافزاید و ارتباط بین سایت شما با کاربران راحت تر و بیشتر کند. اگر تا به حال با یکی از نرم افزار های ادیت عکس مانند فوتوشاپ کار کرده باشید حتما با مفهوم سایه ها آشنایی کامل دارید. سایه ها به شما کمک می کنند درک بهتری از صفحه html طراحی شده داشته باشید.
برای تنظیم سایه باکس ها از خصوصیت جالب box-shadow می توانید استفاده کنید این ویژگی 5 پارامتر را دریافت میکند که در زیر می توانید مشاهده نمایید:

  • box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

h-offset : میزان آفست افقی
v-offset : میزان آفست عمودی
blur : میزان شعاع تاری
spread : میزان شعاع پخش سایه
inset : همین مقادیر فوق را برای سایه داخلی تعیین می کند

توجه اگر خواستید می توانید چند سایه داخلی و یا خارجی را به صورت همزمان برای جعبه عناصر خود در نظر بگیرید.

همچنین بخوانید...!

پاسخی بگذارید

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