عرض حاشیه (Border Width)
«عرض حاشیه (Border Width)» یعنی ضخامت قاب دور المان. این مقدار می تواند عددی باشد یا مقدارهای آماده مثل thin، medium، thick. مثل ضخامت جلد دفتر که نازک یا کلفت است.
تنظیم عرض حاشیه با مقادیر عددی و آماده
ویژگی «border-width» ضخامت چهار طرف را تعیین می کند. می توانی px یا em بدهی، یا از thin، medium، thick استفاده کنی. اما یادت باشد اول باید «border-style» تعیین شود تا اثر کند.
نمونه: مقایسه ضخامت های مختلف
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
</style>
<p class="one">5px border-width</p>
<p class="two">medium border-width</p>
<p class="three">2px border-width</p>
<p class="four">thick border-width</p>
عرض حاشیه متفاوت برای هر طرف
می توانی برای هر طرف مقدار جدا بدهی. دو مقدار یعنی عمودی/افقی. چهار مقدار یعنی بالا، راست، پایین، چپ. این کار مثل گذاشتن چسب پهن فقط روی ضلع های خاص است.
نمونه: یک، دو و چهار مقدار
<style>
p.a {
border-style: solid;
border-width: 5px 20px;
}
p.b {
border-style: solid;
border-width: 20px 5px;
}
p.c {
border-style: solid;
border-width: 25px 10px 4px 35px;
}
</style>
<p class="a">5px بالا/پایین و 20px چپ/راست</p>
<p class="b">20px بالا/پایین و 5px چپ/راست</p>
<p class="c">25 بالا، 10 راست، 4 پایین، 35 چپ</p>
گام های عملی تنظیم عرض حاشیه
- اول «border-style» مناسب را تعیین کن.
- حالا «عرض حاشیه (Border Width)» را با px یا مقادیر آماده بده.
- در صورت نیاز برای هر طرف مقدار جدا مشخص کن.
نکته: اگر «border-style» تنظیم نشود، «عرض حاشیه (Border Width)» دیده نمی شود.
مطالب مرتبط: حاشیه ها، رنگ حاشیه، گرد کردن گوشه ها. برای لینک سازی داخلی، از عبارت عرض حاشیه به عنوان لنگر استفاده کن.
جمع بندی سریع
- اول سبک حاشیه را تنظیم کن.
- عرض می تواند px یا thin/medium/thick باشد.
- دو مقدار یعنی عمودی/افقی؛ چهار مقدار یعنی هر طرف.
- زیادی ضخیم نگذار؛ متن را شلوغ می کند.