display

display

CSS display Property

The CSS display property is used to alter the default display behavior of elements. 'Block display' elements cannot be laid side by side horizontally unless you apply the float property to them for strategic positioning. While other elements are 'inline display' elements that sit side by side horizontally by default. You can change the default behaviors of both types using the display property. In the example below we usually expect a div element to take up a whole display block so they will stack vertically down the page and each stretching the entire width of the page taking up a block. Let's change their default display behavior.

CSS CODE EXAMPLE

<style type="text/css">
.myDivs {
    display: inline;
    background: #BFFFFF;
    border: #00D2D2 1px solid;
    padding: 12px;
}
</style>
<div class="myDivs">div content ...</div>
<div class="myDivs">div ...</div>
<div class="myDivs">div co ...</div>

 

div content ...

 

div ...

 

div co ...

Possible Values:

block •• inline •• none •• inline-block •• list-item •• run-in •• compact
table •• inline-table •• table-row-group •• table-header-group •• table-footer-group
table-row •• table-column-group •• table-column •• table-cell •• table-caption
ruby •• ruby-base •• ruby-text •• ruby-base-group •• ruby-text-group

click here to code. 

Tweet