display:
خاصیت display نحوه نمایش عنصر مورد نظر را در صفحه تعیین می کند ، که می تواند یکی از حالت های زیر را داشته باشد :
– none : عنصر بر روی صفحه نمایش داده نمی شود .
– block : عنصر به صورت یک شی مجزا با یک خط فاصله قبل و بعد از آن نمایش داده می شود .
– inline : عنصر به صورت یک شی درون خطی بدون هیچ خط فاصله قبل و بعد از آن نمایش داده می شود ، که حالت پیش فرض است .
– list-item : عنصر به صورت یک لیست نمایش داده می شود .
– run-in : عنصر به صورت یک شی مجزا یا درون خطی ، بسته به محتویات درونی صفحه نمایش داده می شود .
– compact : عنصر به صورت یک شی مجزا یا درون خطی ، بسته به محتویات درونی صفحه نمایش داده می شود .
– table : عنصر به صورت یک جدول با یک خط فاصله قبل و بعد از آن صفحه نمایش داده می شود .
– inline-table : عنصر به صورت یک شی دورن جدولی بدون خط فاصله قبل و بعد از آن صفحه نمایش داده می شود .
– table-row-group : عنصر به صورت بخشی از اجزای یک سطر جدول ( در کنار هم ) همانند تگ < tbody > نمایش داده می شود .
– table-header-group : عنصر به صورت بخشی از اجزای یک سطر جدول ( در کنار هم ) همانند تگ < thead > نمایش داده می شود .
– table-footer-group : عنصر به صورت بخشی از اجزای یک سطر جدول ( در کنار هم ) همانند تگ < tfoot > نمایش داده می شود .
– table-row : عنصر به صورت اجزای یک سطر جدول ( در کنار هم ) همانند تگ < tr > نمایش داده می شود .
– table-column-group : عنصر به صورت بخشی از اجزای یک ستون جدول همانند تگ < colgroup > نمایش داده می شود .
– table-column : عنصر به صورت اجزای یک ستون جدول همانند تگ < td > نمایش داده می شود .
– table-group : عنصر به صورت یک خانه ستون های جدول همانند تگ < col > نمایش داده می شود .
– table-cell : عنصر به صورت خانه یک ستون جدول همانند تگ های < td > و < th > نمایش داده می شود .
– table-caption : عنصر به صورت عنوان یک جدول نمایش داده می شود
مثال : در مثال زیر ۲ حالت inline و block با هم مقایسه شده اند . به نحوه نمایش ۲ عنصر در کنام هم توجه کنید ، در حالت inline دو عنصر به صورت خطی و در کنار هم نمایش داده شده ولی در حالت block ، که حالت پیش فرض است با یک خط فاصله نمایش داده شده اند . بررسی بقیه حالت ها را به عهده خواننده می گذاریم :
حالت inline < table style=”border: solid 2px blue ; width: 400px; display: inline” > < tr > < td style=”border: solid 2px blue” > a < /td > < td style=”border: solid 2px blue” > b < /td > < td style=”border: solid 2px blue” > c < /td > < /tr > < /table > < img src=”../Pic/imgexample.jpg” style=”display: inline” / > |
Example