با استفاده از ویژگی width اندازه عرض ناحیه محتوای عنصر تعیین می شود.

قبل از بررسی این ویژگی باید با Box Model در سی اس اس آشنا باشیم تا نواحی مختلف هر عنصر را بشناسیم.

ادامه مطلب

 

برای عرض محتوای عنصر زیر عرض 100 پیسکل تعیین شده است:

 

div {
  width: 100px;
  height: 100px;
}

 

نکته مهمی که باید توجه شود این است که همیشه عرض عنصر دقیقا همانی نخواهد بود که توسط ویژگی width تعیین شده است. امکان دارد عنصر دارای padding یا همان فاصله داخلی باشد که مقدار آن به عرض نهایی عنصر اضافه می شود.

 

div {
  width: 100px;
  padding: 10px;

  /* width == 10px + 100px + 10px == 120px */
}

 

به عنوان نمونه در مثال بالا عرض نهایی عنصر 120 پیکسل خواهد بود چرا که سمت چپ و راست عنصر دارای 10 پیکسل فضای داخلی می باشند.

البته این روش را می توان تغییر داد. یعنی می توان طوری عمل کرد که حتی باوجود padding عرض نهایی همان 100 پیکسل باشد. برای این کار می توان از ویژگی box-sizing استفاده کرد که در مطالب آینده آن را بررسی خواهیم کرد.

برای عناصر خطی مثل <a> و یا <span> ویژگی width هیچ تاثیری روی آنها نخواهد گذاشت. برای اینکه بتوان از طریق این ویژگی عرض اینگونه عناصر را کنترل کرد باید توسط ویژگی display این عناصر را از حالت خطی خارج کنیم. مثلا می توان display آنها را تبدیل به block و یا inline-block کرد.

 

span {
  display: inline-block;
  width: 100px;
}

 

نکته دیگر اینکه نتیجه نهایی عرض عنصر می تواند توسط ویژگی های min-width و max-width بازنویسی شود و عرض دقیقا آنچه که توسط ویژگی width تعیین شده است نباشد.

 

مقادیر ویژگی width

 

width: <length> | <percentage> | auto | inherit

 

 

مقدار طولی

به کمک واحدهای مطلق و نسبی می توان به این ویژگی مقدار داد.

 

width: 100px;
width: 4rem;
width: 10vh;
width: 100cm;

 

 

مقدار درصدی

اگر از مقادیر درصدی استفاده کنیم مرورگر مقدار را نسبت به عرض نگهدارنده یا همان پدر عنصر تعیین می کند.

 

.dad {
  width: 100px;
}

.dad .boy {
  width: 10%; /* 10px */
}

 

 

auto

زمانی که از کلمه کلیدی auto برای این ویژگی استفاده می شود مرورگر عرض عنصر را بر اساس flow عنصر به صورت خودکار تعیین می کند. پس عرض نهایی بستگی به موقعیت عنصر و عناصر اطراف آن خواهد داشت.

ناگفته نماند که auto مقدار اولیه یا همان پیشفرض عنصر می باشد.

 

inherit

با استفاده از کلمه کلیدی inherit مقدار width عنصر برابر با مقدار ویژگی width عنصر پدر خواهد بود.

 

مثال

دموی زیر را بررسی کنید: