شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

کاربرد خاصیت display در CSS

css-display

همان طور که تا این قسمت از آموزش های مقدماتی استایل نویسی با css ملاحظه کردید، این زبان کمکی برای ایجاد جلوه های ظاهری و فرمت بندی کدها و عناصر html از خاصیت های ویژه خود استفاده می کند که هر کدام از آنها کاربرد خاصی دارند و بر روی عناصر به خصوصی تاثیرگذار هستند، یکی دیگر از این خاصیت ها display نام دارد که تعیین کننده نحوه نمایش یک عنصر (به صورت بلاک، جدول، لایه مخفی و...) در صفحات وب است،  display با مقادیر متفاوت، تنظیمات متفاوتی نیز در اختیار طراحان وب قرار می دهد، در ادامه آموزش با کاربرد این خاصیت در css بیشتر آشنا خواهیم شد.

ویژگی display


همان طور که پیش از این اشاره شد، ویژگی display برای تنظیم نحوه نمایش عناصر در صفحات وب به کار می رود و بدین منظور مقادیر متفاوتی می پذیرد که هر کدام از آنها کاربرد خاصی دارند، از جمله این مقادیر می توان block، table ، inline-block، none، list-item و... را نام برد، در زیر به تفصیل به این موارد اشاره می کنیم.

display block


از display با مقادیر block برای ایجاد لایه های معمولی و پرکاربرد وب (به شکل مربع یا مستطیل) به صورت غیر هم سطح استفاده می شود، یعنی یک بلاک اگر در کنار سایر عناصر وب قرار گیرد (به طور مثال اگر بلاک div در بین دو بلاک div دیگر قرار گیرد)، موارد بعد از خود را به پائین هدایت کرده و خود در زیر عناصر سطح بالاتر قرار می گیرد (یک لایه از نوع block در حالت پیش فرض، امتداد عرض خود را پوشش می دهد)، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی display block در css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:block;
    height:200px;
    width:200px;
    border:1px solid #999;
    background:#F60;
    margin-bottom:8px;
}
.block-2{
    display:block;
    height:200px;
    width:200px;
    border:1px solid #999;
    background:#39C;
    margin-bottom:8px;    
}
.block-3{
    display:block;
    height:200px;
    width:200px;
    border:1px solid #999;
    background:#FC0;
    margin-bottom:8px;    
}
</style>
</head>
<body>
<div class="block-1">
display:block 1
</div>
<div class="block-2">
display:block 2
</div>
<div class="block-3">
display:block 3
</div>
</body>
</html>
برای دیدن پیش نمایش آنلاین، به انتهای مطلب مراجعه کنید.
نکته 1: لایه های از نوع display block با استفاده از خاصیت float می توانند در کنار هم و به صورت هم سطح قرار گیرند.
نکته 2: در فرمت بندی قالب های وب و طراحی کاربردی، به طور معمول از بلاک هایی با پس زمینه transparent یا شفاف نیز استفاده می شود، لذا یک بلاک ممکن است از لحاظ بصری هیچ نمودی نداشته باشد، ولی در اسکلت بندی کار موثر باشد.

display table


از display با مقادیر table برای ایجاد جداول، بدون استفاده از تگ table استفاده می شود، در واقع یک عنصر با خاصیت display table به صورت یک جدول نشان داده می شود و بلاک های درونی آن به عنوان سلول ها و ستون های جدول (با توجه به تنظیمات) پردازش می شوند، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی display table در css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:table;
    height:200px;
    width:600px;
    border:1px solid #999;
    background:#F60;
    padding:4px;
    margin-bottom:8px;
}
.block-2{
    display:table-cell;
    height:200px;
    width:200px;
    background:#39C;
    margin-bottom:8px;    
}
.block-3{
    display:table-cell;
    height:200px;
    width:200px;
    background:#FC0;
    margin-bottom:8px;
}
</style>
</head>
<body>
<div class="block-1">
display:table
<div class="block-2">
display:table-cell
</div>
<div class="block-3">
display:table-cell
</div>
</div>
</body>
</html>
نکته: خاصیت های زیرمجموعه display table عبارتند از: table-caption، table-cell، table-column، table-column-group، table-footer-group، table-header-group، table-header-group، table-row و table-row-group که می توانید از آنها برای لایه های درونی استفاده کنید.

display inline


از display با مقادیر inline برای ایجاد عناصر هم سطح استفاده می شود، یعنی لایه هایی که به صورت display inline هستند، در صورتی که فضای کافی برای آنها وجود داشته باشد، در یک خط و در کنار هم نشان داده می شوند، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی display inline در css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:inline;
    height:200px;
    width:200px;
    background:#F60;
    margin-bottom:8px;
}
.block-2{
    display:inline;
    height:200px;
    width:200px;
    background:#39C;
    margin-bottom:8px;    
}
.block-3{
    display:inline;
    height:200px;
    width:200px;
    background:#FC0;
    margin-bottom:8px;
}
</style>
</head>
<body>
<div class="block-1">
display:inline
</div>
<div class="block-2">
display:inline
</div>
<div class="block-3">
display:inline
</div>
</body>
</html>
نکته 1: اگر مثال بالا را در یک فایل html  ذخیره کرده و در مرورگر اجرا کنید، خواهید دید که سه لایه از نوع display inline در کنار هم در یک سطح قرار گرفته اند، لذا عناصر inline رفتاری مشابه تگ span در html دارند.
نکته 2: فرمت بندی با display inline معمولا تنها برای محتوای خاصی که به صورت عادی باید در یک خط باشند (مانند متن، تصاویر و...) صورت می گیرد، چرا که خاصیت هایی مانند height، width و... در لایه های inline نادیده گرفته می شوند و لذا این مقادیر در طراحی، برای ایجاد بلاک ها یا باکس ها مناسب نیست.

display inline-block


از display با مقادیر inline-block برای ایجاد بلاک های هم سطح و از نوع block استفاده می شود، یعنی یک لایه inline-block با اینکه یک بلاک است، اما به صورت هم سطح پردازش می شود، به این ترتیب می توان در عین استفاده از ویژگی های عناصر block، آنها را به صورت inline نیز نمایش داد، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی inline-block در css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:inline-block;
    height:200px;
    width:200px;
    background:#F60;
    margin-bottom:8px;
}
.block-2{
    display:inline-block;
    height:200px;
    width:200px;
    background:#39C;
    margin-bottom:8px;    
}
.block-3{
    display:inline-block;
    height:200px;
    width:200px;
    background:#FC0;
    margin-bottom:8px;
}
</style>
</head>
<body>
<div class="block-1">
display:inline-block
</div>
<div class="block-2">
display:inline-block
</div>
<div class="block-3">
display:inline-block
</div>
</body>
</html>
نکته: برای سازگاری با تمام مرورگرها، بهتر است در کنار استفاده از inline-block از خاصیت float با مقادیر left یا right نیز استفاده شود.

display inline-table


از display با مقادیر inline-table برای ایجاد لایه های از نوع جدول اما به صورت هم سطح استفاده می شود، در واقع یک عنصر inline-table مشابه table بوده و در عین حال به صورت هم سطح پردازش می شود، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی inline-block در css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:inline-table;
    height:200px;
    width:200px;
    background:#F60;
    margin-bottom:8px;
}
.block-2{
    display:inline-table;
    height:200px;
    width:200px;
    background:#39C;
    margin-bottom:8px;    
}
.block-3{
    display:inline-table;
    height:200px;
    width:200px;
    background:#FC0;
    margin-bottom:8px;
}
</style>
</head>
<body>
<div class="block-1">
display:inline-table
</div>
<div class="block-2">
display:inline-table
</div>
<div class="block-3">
display:inline-table
</div>
</body>
</html>
نکته: خاصیت های زیرمجموعه display inline-table عبارتند از: table-caption، table-cell، table-column، table-column-group، table-footer-group، table-header-group، table-header-group، table-row و table-row-group.

display list-item


از display با مقادیر list-item برای ایجاد بلاک هایی به شکل آیتم های یک لیست در وب استفاده می شود، هرچند این ویژگی چندان پرکاربرد نیست (و بیشتر از تگ های ul و li استفاده می شود)، اما قابلیتی است که در css وجود دارد، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی inline-block در css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:list-item;
    height:200px;
    width:200px;
    background:#F60;
    margin-bottom:8px;
    list-style:circle;
    margin-right:10px;
}
.block-2{
    display:list-item;
    height:200px;
    width:200px;;
    background:#39C;
    margin-bottom:8px;
    list-style:circle;
    margin-right:10px;        
}
.block-3{
    display:list-item;
    height:200px;
    width:200px;
    background:#FC0;
    margin-bottom:8px;
    list-style:circle;
    margin-right:10px;    
}
</style>
</head>
<body>
<div class="block-1">
display:list-item
</div>
<div class="block-2">
display:list-item
</div>
<div class="block-3">
display:list-item
</div>
</body>
</html>
نکته: برای اینکه علامت های مربوط به آیتم های لیست به درستی نمایش داده شوند، لازم است که بلاک ها از اطراف صفحه، به اندازه مقادیری فاصله داشته باشند (لذا باید از margin استفاده کنید).

display none


از display با مقادیر none برای ایجاد لایه های مخفی در صفحات وب استفاده می شود، بدین معنی که لایه و محتوای درون آن از دید کاربران مخفی می شود، مثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی inline-block در css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.block-1{
    display:block;
    height:200px;
    width:200px;
    background:#F60;
    margin-bottom:8px;
    list-style:circle;
    margin-right:10px;
}
.block-2{
    display:none;
    height:200px;
    width:200px;;
    background:#39C;
    margin-bottom:8px;
    list-style:circle;
    margin-right:10px;        
}
.block-3{
    display:block;
    height:200px;
    width:200px;
    background:#FC0;
    margin-bottom:8px;
    list-style:circle;
    margin-right:10px;    
}
</style>
</head>
<body>
<div class="block-1">
display:block
</div>
<div class="block-2">
display:none
</div>
<div class="block-3">
display:block
</div>
</body>
</html>
نکته: استفاده از display none با استفاده از خاصیت visibility hidden متفاوت است، در هنگام استفاده از display none، لایه به کلی از صفحه حذف می شود (عرض و ارتفاع آن صفر در نظر گرفته می شود)، اما با استفاده از visibility hidden، اگرچه لایه و محتوای آن مخفی می شود، اما جای آن در صفحه باقی می ماند (عرض و ارتفاع آن در صفحه وجود دارد).

مثال و پیش نمایش آنلاین


در نمونه کد زیر ترکیبی از مقادیر پر کاربرد مربوط به خاصیت display و پیش نمایش آنلاین آن را ملاحظه می کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ویژگی display در css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    line-height:20px;
}
.block-1{
    display:block;
    height:100px;
    width:100px;
    background:#F60;
    margin-bottom:8px;
}
.block-2{
    display:block;
    height:100px;
    width:100px;;
    background:#39C;
    margin-bottom:8px;
}
.block-3{
    display:block;
    height:100px;
    width:100px;
    background:#FC0;
    margin-bottom:8px;    
}
.block-4{
    display:table;
    height:100px;
    width:300px;
    background:#F60;
    padding:4px;
}
.block-5{
    display:table-cell;
    height:100px;
    width:100px;;
    background:#39C;
}
.block-6{
    display:table-cell;
    height:100px;
    width:100px;
    background:#FC0;
}
.block-7{
    display:inline-block;
    height:100px;
    width:100px;
    background:#F60;
}
.block-8{
    display:inline-block;
    height:100px;
    width:100px;;
    background:#39C;
}
.block-9{
    display:inline-block;
    height:100px;
    width:100px;
    background:#FC0;
}
</style>
</head>
<body>
&laquo; استفاده از display:block &raquo;<br />
<div class="block-1">
display:block
</div>
<div class="block-2">
display:block
</div>
<div class="block-3">
display:block
</div>
<hr />
&laquo; استفاده از display:table &raquo;<br />
<div class="block-4">
display:table 
<div class="block-5">
display:table-cell
</div>
<div class="block-6">
display:table-cell
</div>
</div>
<hr />
&laquo; استفاده از display:inline-block &raquo;<br />
<div class="block-7">
display:inline-block
</div> 
<div class="block-8">
display:inline-block
</div>
<div class="block-9">
display:inline-block
</div>
</body>
</html>
پیش نمایش
دسته بندی: آموزش مقدماتی » CSS
برچسب ها: CSS
قبلی »
« بعدی
related مطالب بیشتر:
سلکتور آی دی (ID) و کلاس (Class) در CSS
کار با border و outline در CSS
مقدمه ای بر CSS و استایل دهی صفحات وب
نحوه تنظیم لیست با تگ ul li در CSS
ویژگی های Font و Text در CSS
دیدگاه
more ۳۰ دیدگاه برای این مطلب ارسال شده است.
more چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.
قراگوزلو
۲۰:۲۲ ۱۳۹۵/۱۱/۱۰
<html xmlns="http://www.w3.org/1999/xhtml">
آیا این کد باید در سایت قرار بگیرد؟
بستگی به نسخه HTML سایت دارد، به طور مثال در HTML 5 این قسمت (که مربوط به XHTML است)، استفاده نمی شود!
مهديه
۱۶:۲۹ ۱۳۹۵/۰۶/۰۸
خسته نباشيد چرا با اينكه عكسها به صورت display inline ميزاريم باهم فاصله دارند؟؟
سورس کدها باید بررسی شوند، با این حال margin و padding ها را صفر در نظر بگیرید.
تورج امین فر
۱۷:۲۵ ۱۳۹۵/۰۳/۲۱
سلام خیلی تشکر ولی متاسفانه کامل نبود من اطلاع دارم که display flex و چند مدل دیگری از display هم وجود دارد لذا ممنون میشم اون ها رو هم اضافه بفرمایید.
بله حق با شما است منتها این قابلیت به صورت کاربردی در CSS3 معرفی شده و لذا باید در قالب آموزشهای جداگانه مطرح شود که متاسفانه در کوتاه مدت امکانپذیر نیست! البته در وب اطلاعاتی در این خصوص وجود دارد.
حمزه ارکیا
۲۳:۱۱ ۱۳۹۴/۱۲/۱۴
سلام
ممنون خیلی مفید بود
محسن
۱۲:۱۹ ۱۳۹۴/۱۱/۱۲
سلام
اگه ممکن هست این کد دستوری رو برام توضیح بدید و بگید چطور میتونم دستور none رو block کنم:
link{display:none;}
متشکرم
سلام
عبارت link یک سلکتور در CSS است که اشاره به تگ link در HTML دارد، در HTML از link برای وارد کردن یک فایل خارجی به صفحه (به فرض فایل style.css) استفاده می شود که به صورت پیش فرض تنها در پس زمینه پردازش شده و دیده نمی شوند (حالت none)، هرچند دقیقا هدفتان را توضیح نداده اید، اما تا آنجا که اطلاع داریم امکان block کردن اینگونه موارد به این نحو عملا وجود ندارد! اگر می خواهید آدرس یا سورس کد را نمایش دهید، باید به کمک دستورات PHP اطلاعات مورد نیاز خود را استخراج کرده و در خروجی HTML چاپ کنید.
مهدی
۰۳:۴۸ ۱۳۹۴/۱۰/۱۴
ممنون دستتون درد نکنه
مهدی
۰۱:۰۰ ۱۳۹۴/۱۰/۱۳
مشکل من اینه که الان این قالب بلاک هاش کنار هم قرار نمیگیرن همه ی کد هارو تست زدم 
float
display
position
دیگه مغزم جواب نمیده ایرادش رو پیدا نمیکنم لطفا بگین کجای کد نویسی اشتباهه
مرسی
لینک قالب
http://s3.picofile.com/file/8231321626/Theme.zip.html
امیدوارم کل کد نویسی اشتباه نباشه فقط
ممنون میشم
صرف استفاده از فلان خاصیت CSS کفایت نمی کند، باید معنی، کارکرد و تاثیر دستورات را دقیقا بدانید، به طور مثال زمانی که می خواهید عناصر در کنار هم قرار بگیرند، استفاده از clear بعد از یک عنصر کار اشتباهی است و باعث غیرخطی شدن عنصر بعدی می شود، یا استفاده از margin-right با مقدار به فرض 300 پیکسل برای عنصری که می خواهید به اندازه 4 پیکسل از عنصر مجاور فاصله داشته باشد کار اشتباهی است و مسلما موجب بهم ریختن نمایش قالب می شود، استفاده از text-align با مقدار center برای بلاک دربرگیرنده سایر بلاک های هم خط (بلاک هایی که باید در یک راستا در کنار هم باشند)، باعث می شود آنها به سمت داخل (center) گرایش کنند، در حالی که معمولا باید از سمت راست یا چپ گرایش قالب مشخص شود و سپس با استفاده از تنظیم margin موقعیت به اندازه مورد نیاز تعریف شود (تعریف درست اندازه ها و تقسیم بین بلاک ها، نقش مهمی دارد)، همچنین استفاده از خاصیت vertical-align با مقدار top برای بلاک درونی (بلاک نمایش مطالب) توصیه می شود، چون این بلاک بدون محتوا به انتهای صفحه گرایش می کند و با تنظیم vertical-align به سمت بالا موقعیت خواهد گرفت!، اشکال دیگری که در بررسی اجمالی مشهود است، استفاده از display با مقدار inline-block صرفا برای یک بلاک است، در حالی که تمام بلاک هایی که می خواهید در کنار هم باشند، باید به صورت inline-block یا بلاک خطی باشند و این خاصیت را داشته باشند.
مهدی
۲۲:۴۱ ۱۳۹۴/۱۰/۱۲
ممنون بابت پاسختون درسته حرفتون من هم قدم به قدم جلو میرم اما مشکل در اجرا با سیستم های مختلف هست نه مرورگرها مثلا من با پی سی خودم کد ها رو مینویسم ثبت هم میکنم قالب رو وقتی با سیستم وارد وب میشم همه چیز مرتب و دقیقه اما وقتی وب رو با لپ تاپ باز میکنم بلوک ها جابه جا میشن و دیگه اون فاصله گذاری بینشون نیست مثلا بلوک سمت چپ میاد یه مقداری داخل بلوک وسط و بلوک سمت راست فاصله ش بیشتر میشه باز هم از تیم پشتیبانی تون تشکر میکنم
مهدی
۱۹:۱۴ ۱۳۹۴/۱۰/۱۲
سلام
ممنون بابت آموزش های شما
من میخوام یه قالب سه ستونه بزنم با استفاده از آموزش های شما اینکار رو انجام میدم همه چیز هم درسته اما وقتی یه بازدید کننده با یه سیستم دیگه میاد توی وبم بهم ریخته شده میبینه نمیدونم کجای کار ایراد داره انگار با تغییر رزولشن و گرافیک های مختلف یکسان نمایش داده نمیشه
لطفا راهنمایی کنید
ممنون
سلام
طراحی قالب سازگار با مرورگرهای مختلف خود یک چالش برای طراحان وب است و مخصوصا برای کسانی که تازه وارد این گود شده اند، اغلب دردسرساز است! بهترین راه این است که در هنگام طراحی قالب و به صورت قدم به قدم نتیجه کارتان را در مرورگرهای مختلف تست کنید تا اگر مشکلی دیده شد، در همان گام بر طرف شود، در اکثر موارد با کمی تجربه و استفاده از خاصیت های مختلف CSS می توان رفتار یکسانی بین مرورگرها مشاهده کرد، بررسی سورس کد سایت های مختلف و استفاده از افزونه هایی مانند Web Developer در مرورگر فایرفاکس می تواند بسیار سودمند باشد، ضمن اینکه هر چه که در حوزه وب به جلو می رویم، استاندار فراگیرتری بین مرورگرها رایج می شود و این موارد به حداقل می رسند.
داوود
۱۹:۴۰ ۱۳۹۴/۰۹/۰۲
سلام و شبتون بخیر آقای مهندس؛
امیدوارم حالتون خوب باشه، همچنین از پاسخگویی به موقع و دلسوزانه تون ممنون و متشکرم.
استاد یه سوال یا شایدم ریزه کاری برام پیش اومده که ازتون میپرسم. ابتدا این کد css رو ببینید: (قسمت اصلی سوالم رو بعد از کد مطرح میکنم).
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    padding: 10px;
}

div {
    width: 100px;
    height: 100px;
    margin-top: 5px;
    padding: 60px;
    display: inline;
}

#one {
    background-color: blue;
}

#two {
    background-color: red;
}

#three {
    background-color: yellow;
}

#four {
    background-color: #eee;
}
و اینهم کد Html ش:
<body>
       <div id="one"></div>
       <div id="two"></div>
       <div id="three"></div>
       <div id="four"></div>   
</body>
سوال من تو این بخش از کد هستش:
div {
    width: 100px;
    height: 100px;
    margin-top: 5px;
    padding: 60px;
    display: inline;
}
تو این بخش از کد اگه ما بیایم و padding رو حذف کنیم، میبینیم که کل div ها هم انگار به نوعی از چرخه صفحه خارج میشن و اصلا قابل مشاهده نیستن، مگه اینکه بیایم و خاصیتهای display رو تغییر بدیم. میخواستم ببینم چرا تو اینجا padding نقش مهمی رو داره ایفا میکنه؟ البته اگه با خاصیت inline بیاد؟؟ چون الان هر کدوم از div های ما که طول و عرض خودشون رو دارن پس چرا برای نمایش div ها به نوعی وجود padding انگار لازم هستش؟؟ ممنون و مجددا سپاسگزارم ازتون.
سلام
به نظر این نکته قبلا در پرسش های شما به نوعی پاسخ داده شده! عناصر inline نمی توانند عرض و ارتفاع داشته باشند و زمانی که خالی باشند (هیچ متن یا کاراکتر خاصی نداشته باشند)، قاعدتا نمایش داده نمی شوند.
داوود
۱۱:۳۳ ۱۳۹۴/۰۴/۱۶
سلام آقای مهندس؛ تقریبا درست فرمودین، ببینید اونجایی که میگین: "منظور از box model به شکل box دیدن عناصر HTML در طراحی CSS است" آره درسته.
مثلا ببینید الان یک تگ span به تنهایی و بدون اینکه بهش خاصیتهایی مثل float یا display رو بدیم، نمیتونیم بهش خاصیتهای margin و padding رو بدرستی اعمال کنیم دیگه، درست میگم؟؟ پس ما باید بیایم و برای این تگ span کاری کنیم که به شکل box تقریبا در بیاد و بتونیم border ، margin و یا padding بهش اعمال کنیم.
سلام
float ارتباط مستقیمی به margin و padding ندارد (یک عنصر بدون float شدن هم می تواند این خاصیت ها را داشته باشد) و لذا از این نگاه ویژگی فرعی در زمینه box model است!، در عمل صرف دانستن ویژگی های کلی یک خاصیت و مهم تر از آن، تمرین و کاربرد آن در طراحی ها در بحث CSS کفایت می کند، تعریف قوانین جدید یا ریزبینی غیرمعمول کمک چندانی به پیشرفت شما نمی کند! :-)
داوود
۱۹:۵۱ ۱۳۹۴/۰۴/۱۵
سلام آقای مهندس؛ عصرتون بخیر باشه.
استاد یه سوال دارم از خدمتتون که شامل چند بخش هست؛ به ترتیب پس از گرفتن هر پاسخ، بخش دیگه ش رو ازتون می پرسم.
الف) اگه بخوایم محاسباتی که مربوط به box model هست بر روی عنصر ما به درستی صدق کرده و عمل کنه اون عنصر باید دارای شرایط زیر باشه:
1) یا block level باشه
2) دارای display از نوع block یا inline-block باشه.
3) بهش خاصیت float بدیم.
آیا مواردی که عرض کردم خدمتتون درسته؟؟ نمیدونم انگاری چرا مورد 3 رو حدس میزنم خیلی مثل 2 تای دیگه درست نباشه یا اینکه دارم اشتباه میکنم؟؟
یعنی اگه float هم بهش بدیم؛ باز هم با خاصیتهای display یا block level بودن از نظر اعمال مقادیر بعدیمون مشترکه؟؟
امیدوارم سوالم رو واضح گفته باشم خدمتتون.
سلام
دقیقا متوجه منظورتان نشدیم! منظور از box model به شکل box دیدن عناصر HTML در طراحی CSS است که به فرض محدوده قسمت محتوای عنصر، border، padding و margin به صورت فرضی و در حالت درختی ترسیم می شوند (جهت بررسی ساختار HTML CSS صفحه در هنگام طراحی در مرورگرها یا سایر پلاگین ها و برنامه های مرتبط)، این موارد قاعدتا با خاصیت display ارتباط دارند، اما در بحث float هدف شناور کردن و تغییر محل نمایش یک عنصر است، هر چند در عمل استفاده و عدم استفاده از clear و float بودن یا نبودن عنصر زیرین در ویژگی هایی مانند margin موثر است.
داوود
۱۱:۵۶ ۱۳۹۴/۰۴/۱۴
سلام آقای مهندس؛
استاد عزیز در این خط از توضیحات در خصوص display:inline نکته خیلی جالبی نوشتین؛ ببینید:
"نکته 2: فرمت بندی با display inline معمولا تنها برای محتوای خاصی که به صورت عادی باید در یک خط باشند (مانند متن، تصاویر و...) صورت می گیرد، چرا که خاصیت هایی مانند height، width و... در لایه های inline نادیده گرفته می شوند و لذا این مقادیر در طراحی، برای ایجاد بلاک ها یا باکس ها مناسب نیست."
الان پس به همین دلیل هستش که من نمیتونم div خودم رو که به شکل آبی و مربع شکل هست مشاهده کنم؟؟ کد رو ببینید لطفا:
.item{
    width:100px;
	height:100px;
	}	
.first{
    background-color:blue;
    display:inline;
	}
.second{
    background-color:green;
    float:right;
	}
<body>
<div id="container">
<div class="item first"></div>		
</div>
</body>
الان به همین خاطر و دلیلی که شما فرمودین ما نمیتونیم box خودمون رو مشاهده کنیم، درست میگم خدمتتون؟
سلام
بله دقیقا، اگر هم متنی داخل div بنویسید، ملاحظه می کنید که فقط تا حد حاشیه متن، باکس رنگی خواهید داشت، همچنین می توانید display را به موارد دیگر تغییر داده و تفاوتها را مشاهده کنید.
داوود
۱۹:۲۶ ۱۳۹۴/۰۴/۰۷
با سلام؛ ممنونم ازتون و دست گلتون بخاطر پاسخ به سوال قبلیم در همین امروز ممنون و سپاسگزارم.
آقای مهندس در این نمونه کد:
<style type="text/css">
#nav{
   width:800px;
   margin:0 auto; 
   list-style:none;
   padding-top:15px; 
}

#nav li{
    display:inline-block;
	margin-left:17px;
	font-family:tahmoma;
	font-size:13px;
}
</style>
</head>
<body>
	<ul id="nav">
	   	<li><a href="#">صفحه اصلی</a></li>
		<li><a href="#">نمونه کارها</a></li>
		<li><a href="#">استخدام</a></li>
		<li><a href="#">درباره ما</a></li>
	</ul>
</body>
در واقع attribute ی که باعث میشه منوهای ما بیان تو یک خط و حالت inline-block رو بگیرن؛ این خط هستش:
display:inline-block;
خب حالا من 2 تا سوال داشتم؛
الف) الان اگه بخوایم عنصرهای تگ a ما همین حالت رو داشته باشن، و هر کدوم در خطوط جداگانه باشن (البته بدون اینکه خاصیت inline-block رو از دست بدن) راهکارش اینه که بیایم و تو کد html مون و بعد از هر خط از تگ
<br />
استفاده کنیم؟ یا اینکه راهی داره که بدون اینکه ما در هر خط از منوهامون در html از این تگ استفاده کنیم به خواسته مون دست پیدا کنیم؟ (امیدوارم منظورمو درست رسونده باشم و اگه ابهامی هستش حتما بفرمایین تا اصلاحش کنم).
ب) استاد من تو یه جایی خونده بودم برای اینکه اعمال خواسته های گرافیکی مون به منوها درست عمل کنه از قانون LoVe-HAte استفاده کنیم. یعنی اول Link و بعدش Visited و سپس Hover و در انتها Active . ولی می بینم که تو بعضی جاها بدون اینکه ترتیب فوق رعایت شده باشه منو رو ایجاد کردن و درست هم جواب میده. آیا تکنیکی که گفتم دیگه قدیمی شده؟ (چون تو کتاب 101 ترفند در css که مولفش یه خانم بود این رو نوشته بود)
ببخشید مزاحم شدم استاد عزیزم.
سلام
- تا آنجا که اطلاع داریم، در این حالت جزء تگ br که مرورگر را مجبور به ایجاد یک خط جدید می کند، نمی توان با CSS مقدار inline-block را override کرد! (مگر اینکه مجدد از خاصیت display با مقادیر متمایز استفاده کنید).
- قانون مذکور صرفا یک کلید واژه برای یادآوری ترتیب اعمال سلکتورها بر روی تگ a است که البته برای افراد حرفه ای چندان ضرورتی ندارد و حتی جای حالت focus در آن خالی است!، خیلی از مواقع نیز برخی حالات مانند visited یا active تنظیم نمی شوند و از ویژگی های پیش فرض مرورگر استفاده می شود، به صورت خلاصه سلکتورهایی که می توان به یک تگ a (از مرحله مشاهده تا کلیک و رها کردن ماوس) نسبت داد به صورت زیر است:
a:link
a:visited
a:hover
a:active
a:focus
مهدی
۱۳:۱۸ ۱۳۹۴/۰۳/۱۶
با عرض سلام و خسته نباشید.
وقتی که مقدار display والد و فرزند متفاوت باشد، مقدار auto برای height والد درست عمل نمی کند.
لطفا راهنمایی کنید.
سلام
سوالتان حالت های زیادی را شامل می شود که هر کدام راه حل متفاوتی دارد، لطفا یک نمونه کد درج کنید تا امکان بررسی وجود داشته باشد.
نخست
قبلی
1
2
بعدی
آخر
paged صفحه 1 از 2
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
8 × 8
20 × 20
=
آموزش مقدماتی | آموزش کاربردی | مهارتهای وب | تماس با ما | انتقادات و پیشنهادات | برنامه نویسی وب | پشتیبانی فنی | تبلیغات | درباره ما | حریم خصوصی | سوالات متداول | HEX RGB
copyright  محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
copyright  خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
© 2012 - 2025 Webgoo.ir - All Rights Reserved.