ویژگی width در CSS

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%; 
}

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

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