مقدار inline-block در CSS

همانطور که قبلا گفته شد عناصری که صفت display آنها دارای مقدار inline-block است همانند عناصر inline در کنار یکدیگر قرار میگیرند. البته در این حالت محدودیت استفاده از صفات padding و margin برای سمت های بالا و پایین وجود ندارد. این ویژگی صفت inline-block را به صفتی ایده آل برای ایجاد منو ها در سایت ها تبدیل کرده است.


مقدار inline-block

مدتی طولانی است که ایجاد شبکه ای از باکس ها برای پر کردن پهنای مرورگر (به خصوص موقعی که اندازه ی صفحه ی مرورگر تغییر میکند ) با استفاده از صفت float به خوبی انجام میشود.

با این وجود استفاده از مقدار inline-block برای صفت display این کار را ساده تر کرده است. عناصر inline-block همچون عناصر inline هستند ولی آنها میتوانند دارای طول و عرض باشند.(این ویژگی صفت inline-block را به صفتی ایده آل برای ایجاد منو ها در سایت ها تبدیل کرده است.)

به مثال زیر دقت کنید. در این مثال برای قرار دادن چندین باکس در کنار یکدیگر از همان روش قدیمی تر یعنی استفاده از صفت float کمک گرفته شده است (دقت داشته باشید که در این روش برای عناصری که بعد از باکس ها قرار دارند نیاز به استفاده از صفت clear داریم) :

.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}

.after-box {
    clear: left;
}
خودتان امتحان کنید

نتیجه ای که از نمونه مثال بالا بدست آمد را میتوان به روشی ساده تر با استفاده از مقدار inline-block برای صفت display به دست آورد (دقت کنید که در این روش  نیاز به استفاده از صفت clear نیست) :

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}
خودتان امتحان کنید

 

منتشر شده در ۲۵ شهریور ۱۳۹۶ حمید رضا ملکی ۱۰۹۶ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید