ویژگی display در CSS

display Property

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

نحوه نوشتار

dispaly: none;
display: block;
display: inline;

display: flex;
display: grid;
display: table

در ادامه تعدادی از پر کاربردترین مقادیر ویژگی display را می بینیم:

مقادیر

none​

عنصر نمایش داده نمیشود. اما همچنان در ساختار html حضور دارد.

block​

عنصر در این حالت تمام عرض صفحه را اشغال میکند. از ابتدای سطر شروع شده و تا انتهای سطر ادامه پیدا می کند.

inline​

عنصر هیچ یک از ویژگی های عرض و طول کار نمی کنند و تاثیری نخواهد گذاشت.

inline-block​

عنصر خود دارای ویژگی های inline است اما میتوان به آن مقادیر عرض و طول را نسبت داد.

table​

در این حالت عنصر مانند جدول رفتار خواهد کرد.

flex​

عنصر مانند block رفتار خواهد کرد و عناصر فرزند آن نیز از قوانین flex پیروی خواهند کرد.

inline-flex​

عنصر مانند حالت inline رفتار خواهد کرد اما عناصر فرزند آن از قوانین flex پیروی خواهند کرد.

grid​

عنصر مانند block رفتار خواهد کرد و عناصر فرزند آن نیز از قوانین grid پیروی خواهند کرد.

inline-grid​

عنصر مانند grid رفتار خواهد کرد اما عناصر فرزند آن از قوانین grid پیروی خواهند کرد.

در زیر عناصر را با مقادیر متفاوت از ویژگی display میبینید:

html

<div class="block">
    block
</div>
<div class="inline">
    inline
</div>
<div class="inline-block">
    inline-block
</div>
<div class="table">
    table
</div>
<div class="flex">
    flex
</div>
<div class="inline-flex">
    inline-flex
</div>
<div class="grid">
    grid
</div>
<div class="inline-grid">
    inline-grid
</div>

css

.block {
   display: block;
   background-color: tomato;
}
.inline {
   display: inline;
   background-color: #aaaaaa;
}
.inline-block {
   display: inline-block;
   background-color: dodgerblue;
}
.table {
   display: table;
   background-color: olivedrab;
}
.flex {
   display: flex;
   background-color: red;
}
.inline-flex {
   display: inline-flex;
   background-color: #777777;
}
.grid {
   display: grid;
   background-color: green;
}
.inline-grid {
    display: inline-grid;
    background-color: orange;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها

تمام مرورگرها از این ویژگی پشتیبانی می کنند. اما بعضی از مقادیر توسط بعضی مرورگرها بطور کامل پشتیبانی نمی شوند.

flex​
​این ویژگی هنوز بصورت کامل توسط مرورگر Internet Explorer پشتیبانی نمی شود.

grid​
این ویژگی هنوز بصورت کامل توسط مرورگر Internet Explorer پشتیبانی نمی شود.

inline-grid​
این ویژگی هنوز بصورت کامل توسط مرورگر Internet Explorer پشتیبانی نمی شود.