021-20483015

حداكثر عرض در CSS

استفاده از width ،‌ max-width و ;margin:auto

همانطور كه در درس قبل گفته شد ،‌ عنصر سطح بلوك هميشه تمام عرض در دسترس را پر مي كند.
تنظيم width يك عنصر سطح بلوك از عريض شدن آن و ادامه آن تا انتهاي محدوده محتوا ، جلوگيري مي كند. پس مي توان margin را بر روي auto تنظيم كرد تا عنصر مورد نظر در وسط محدوده محتوا قرار گيرد. عنصر عرض مشخص شده را مي گيرد و باقي مانده از كل عرض حداكثر بصورت يكسان براي هر طرف تقسيم مي شود.

نكته ! مشكل عنصری که فقط عرض عادی آن را تعیین کرده ایم اين است كه وقتي صفحه نمايش را به اندازه اي كمتر از عرض عنصر تغيير دهيم ،‌مرورگر يك نوار اسكرول افقي به صفحه اضافه مي كند. براي حل اين مشكل از max-width استفاده ميكنيم تا مرورگر در صفحات كوچك محتوا را به خوبي نمايش دهد. اين نكته براي مواردي كه مي خواهيم وب سايت را براي دستگاه هاي كوچكتر نيز طراحي كنيم ،‌مهم است.

مثال :

عرض حداکثری
div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}
مشاهده مثال
 

 

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط