CSS
DISPLAY PROPERTY
While all HTML elements have a
predefined structure, we can
change the way any element
appears on screen using the
“display” property.
For example, we could take a
block level element such as a
heading, and set it to
“display: inline”.
h1 { display: inline; }
Or, we could take an inline
element like <a> and set it to
“display: block”.
a { display: block; }
We could even take a block or
inline element and set it to
“display: none” - which means it
will not be displayed at all.
#footer { display: none; }
In each of these examples, we
are not changing the structure of
the element, just the way the
element is displayed.
In CSS 2.1 there are
16 different display values
that can be used.
Display values - part 1
none generates no box at all
block generates a block box
inline generates an inline box
inline-block generates a block box, laid out as an inline box
list-item generates a block box
run-in generates a block or inline box
inherit will inherit the property from the parent element
Display values - part 2
table will behave like a table
table-caption will behave like a table caption
table-cell will behave like a table cell
table-column will behave like a table column
table-column-group will behave like a table column group
table-footer-group will behave like a table footer group
table-header-group will behave like a table header group
table-row will behave like a table row
table-row-group will behave like a table row group.
We are going to focus on
three of the most important
display properties:
“display: block”
“display: inline”
“display: inline-block”
display: block
Elements set to “display: block”
are laid out as blocks,
they flow down the page in
normal flow.
Block elements
This is a heading
Lorem ipsum dolor sit amet consect etuer adipi scing
elit sed diam nonummy nibh euismod tinunt ut laoreet
dolore magna aliquam erat volut.
Dolor sit amet consect etuer adipi scing elit sed diam
nonu nibh euismod tinunt ut laoreet dolore magna
aliquam erat magna aliquam.
They can be given a width
and/or a height.
h1 {
width: 200px;
height: 2em;
}
They can be given margin,
padding and border. Margins,
padding and borders affect
content all around the element.
h1 { margin: 20px; }
They can be given overflow.
p { overflow: hidden; }
Why would you
set an element to
display: block?
“display: block” can be used
to give an inline element
dimension - such as making an
<a> element “clickable”.
display: inline
Elements set to “display: inline”
are laid out within lines. They
do not flow down the page.
Inline elements
This is a heading
Lorem ipsum dolor sit amet consect etuer adipi scing
elit sed diam nonummy nibh euismod tinunt ut laoreet
dolore magna aliquam erat volut.
Dolor sit amet consect etuer adipi scing elit sed diam
nonu nibh euismod tinunt ut laoreet dolore magna
aliquam erat magna aliquam.
They cannot be given a width
and/or a height.
a {
width: 200px;
height: 2em;
}
They can be given margin and
padding. However, margins,
padding and border only affects
content on either side of the
element.
a {
margin: 20px;
padding: 20px;
border: 1px solid red;
}
dolor sit amet consect etuer adipi scin
sed nibh euismod tinunt laore
magna aliquam erat volut nostrud ex
Margin, padding & border affect sides only
They cannot be given overflow.
a { overflow: hidden; }
Why would you
set an element to
display: inline?
“display: inline” can be used to
resolve known bugs in several
versions of IE - such as fixing
odd gaps between list items
and resolving the double-margin
float bug.
display:
inline-block
Elements set with
“display: inline-block”
act like a combination of
“display:block” and
“display: inline”
They can be given width and
height.
img { width: 300px; }
They can be given margin,
padding and border. These
margins, padding and border
affect content all around the
element.
They can also
be given overflow.
div {
display: inline-block;
overflow: hidden
}
However, they are laid out
within lines - like inline elements.
They do not flow down the page.
dolor sit amet consect etuer adipi scin
sed nibh euismod tinunt laore
magna aliquam erat volut nostrud ex
Inline-block element
Why would you
set an element to
display: inline-block?
“display: inline-block” can be used
to trigger the block formatting
context - allowing parent
containers to wrap around
floated child elements.
Parent not wrapping around children
Parent set with display: inline-block
Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley
