HTML and CSS Reference
In-Depth Information
Positioning Elements
In order to fully understand the position an element will take on screen, and the way it inter-
acts with adjacent elements, it is also necessary to take into account the value of the
display
property.
This can be one of 4 primary values:
•
inline
: this is the default for
span
,
a
and
td
elements.
•
block
: this is the default for most other elements, including
div
,
p
and most other elements.
•
inline-block
: this is only the default for the
img
element, but is commonly assigned to oth-
er elements in CSS.
•
none
: the element should be hidden from view.
It is possible to override the
display
property of any elements as follows:
.myclass {
display:inline-block;
}
The primary difference between these display types is as follows:
• An inline element does not have a line break either before or after it, and can sit vertically
adjacent to other elements. In addition, you cannot set the height or width properties for an
inline element, although you can set
line-height
(this property dictates the distance from the
top of the first line of text to the top of the second).
• An inline-block element is like an inline element in that it doesn't force a line break (so
elements can sit vertically adjacent to other elements), but it can be given
height
and
width
.
• A block element forces a new line before and after the element, therefore by default, two
block elements cannot sit vertically adjacent to each other.
• An element set to the display value of
none
does not take up any space in screen, not even
the space it would take up if it was made visible.
The default display type of elements is not always appropriate when laying out the screen.
Consider a screen with the following layout:
