الخاصية Max-width فى CSS

---

سيعلمك هذا الفصل خاصية Max-width فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.

---

خاصية Max-width فى CSS

تحدد خاصية max-width العرض الأقصى لعرض العنصر.

لا يمكن أن تكون قيمة العرض أكبر من القيمة بحد أقصى عرض. إذا كان المحتوى أكبر ، فسيتم الانتقال إلى السطر التالي ، وإذا كان المحتوى أصغر ، فلن يكون له أي تأثير.

مثال للتوضيح:

<style>
	.one {
    background: #cebcbc;
	}

	.two {
    max-width: 90px;
    background: #cebcbc;
	}
	</style>

	<p class="one">Paragraph without max-width</p>
	<p class="two">Paragraph with max-width</p>

Paragraph without max-width

Paragraph with max-width

---

القيم الخاصة بخاصية max-width

القيم المتوفرة:

1. none: إنها القيمة الافتراضية ولا تحتوي على أقصى عرض.
2. length: تُستخدم هذه الخاصية لتعيين طول max-width. يمكن ضبط الطول بالـ px و cm وما إلى ذلك.
3. percentage (٪): تُستخدم هذه الخاصية لتعيين الحد الأقصى للعرض في شكل نسبة مئوية.
4. initial: يتم استخدامه لتعيين خاصية max-width إلى قيمتها الافتراضية.
5. inherit: هذه الخاصية موروثة من الأصل.

أمثلة توضيحية على القيم المختلفة:

<style>
	.one {
    max-width: none;
    background: #cebcbc;
	}

	.two {
    max-width: 90px;
    background: #cebcbc;
	}

	.three {
    max-width: 30%;
    background: #cebcbc;
	}

	.four {
    max-width: initial;
    background: #cebcbc;
	}

	.five {
    max-width: inherit;
    background: #cebcbc;
	}
	</style>

	<p class="one">None value</p>
	<p class="two">Length value</p>
	<p class="three">Percentage value</p>
	<p class="four">Initial value</p>
	<p class="five">Inherit value</p>

None value

Length value

Percentage value

Initial value

Inherit value

تعديل المقال