width Property
ویژگی width
در CSS عرض عنصر را مشخص می کند. عرض عنصر شامل padding
, margin
و border
نمی شود.
نحوه نوشتار
width: 300px; width: 25em; width: 75%;
مقادیر
auto
مرورگر عرض مناسب را برای عنصر محاسبه و اعمال می کند.
واحد های اندازه
مقدار ثابت عرض عنصر، با استفاده از واحدهای اندازه CSS مشخص می شود. مانند ( px
, rem
, em
)
درصد
عرض عنصر را درصدی از عرض عنصر والد در نظر می گیرد.
نکته: ویژگیهای max-width
و min-width
مقدار width
را بازنویسی می کند.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<section> <div class="w1"> این یک متن نمونه برای عنصر است. </div> <div class="w2"> این یک متن نمونه برای عنصر است. </div> <div class="w3"> این یک متن نمونه برای عنصر است. </div> <div class="w4"> این یک متن نمونه برای عنصر است. </div> </section>
css
section { direction: rtl; padding: 15px; font: bold 16px calibri; background-color: rgb(203, 237, 248); } div { margin: 5px 0; color: #ffffff; background-color: red; } .w1 { width: auto; } .w2 { width: 300px; } .w3 { width: 6em; } .w4 { width: 60%; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.