HTML and CSS Reference
In-Depth Information
Things get interesting with the
inline-block
value. Using this value will allow an ele-
ment to behave as a block-level element, accepting all box model properties (which we'll
cover soon). However, the element will be displayed in line with other elements, and it will
not begin on a new line by default.
1.
p {
2.
display: inline-block;
3.
}
Figure 4.1
Three paragraphs displayed as
inline-block
elements, sitting one right
next to the other in a horizontal line
The Space Between Inline-Block Elements
One important distinction with inline-block elements is that they are not always
touching, or displayed directly against one another. Usually a small space will ex-
ist between two inline-block elements. This space, though perhaps annoying, is
normal. We'll discuss why this space exists and how to remove it in the next les-
son.
Lastly, using a value of
none
will completely hide an element and render the page as if
that element doesn't exist. Any elements nested within this element will also be hidden.
1.
div {
2.
display: none;
3.
}
Knowing how elements are displayed and how to change their
display
is fairly import-
ant, as the
display
of an element has implications on how the box model is rendered.
As we discuss the box model, we'll be sure to look at these different implications and how
they can affect the presentation of an element.
What Is the Box Model?
According to the box model concept, every element on a page is a rectangular box and may
have width, height, padding, borders, and margins (see
Figure 4.2
).
Search WWH ::
Custom Search