CSS Display

values for the css display property

by toubia95

HTML

<div class="display1">element 1</div>
<div class="display2">element 2</div>

CSS

/*** DISPLAY rules
inherit, none, inline, block, inline-block, list-item, marker, compact, run-in, [table-header-group|table-footer-group], table, inline-table, table-caption, table-cell, table-row|table-row-group, table-column|table-column-group
*/

/*** POSITION rules
inherit, relative, absolute, fixed, static
*/

.display1, .display2 {
    padding: 20px;
    width: 300px;
    background:silver;
    list-style-type: circle;
        display: inherit; /*heritage*/
        display: static; /*de base*/
        display: inline; /*aligné*/
        display: block; /*boite*/
        display: none; /*invisible*/
        display: inline-block; /*boite alignée*/
        display: table-footer-group; /*en dessous de la boite*/
        display: inline-table;
        width: 40%;
        position: relative;
    top: 0;
    left: 0;

    
}
.display2 {
    background: pink;
            display: table-caption; /*en bas de la boite*/
            display: table-header-group; /*au dessus de la boite*/
            display: inline-table;
}

.display1:after, .display2:after  {
    content:" - after";
    font-size: 12px;
    position: fixed;
    right: 10px;
    bottom: 10px;
}

.display1:before, .display2:before  {
    content:"before - ";
    font-size: 12px;
}