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
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 {
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:
Search WWH ::

Custom Search