HTML and CSS Reference
In-Depth Information
Block elements have
box properties
that include margins, height and width,
padding, and borders. Inline elements do not have box properties and are not
separated from each other. hey low together into lines of word-wrapped text
with other inline elements. he HTML elements that are only allowed inside
the head element are neither block nor inline elements, because these elements
are not involved in content low. Collectively, these elements provide
metadata
about the page and its relation to other web resources.
Some HTML elements can be nested inside other block elements. Inline
elements are always found inside block elements, but a block element should
not be, in most circumstances, inside an inline element. For example, para-
graphs and lists can be inside sections and divisions, but a heading cannot be
nested in another heading. he distinction between block and inline elements
is “loose” because it is subject to the CSS display property. Example 2.5 illus-
trates how this works and introduces an important new HTML block element,
the division.
Example 2.5: using a division element with margins
<!DOCTYPE html>
<html>
<head>
<title>Example 2.5</title>
<style type="text/css">
#preamble { margin: 36px; } /* set margins */
</style>
</head>
<body> <!-- No Page Title -->
<div id="preamble">
Whereas recognition of the inherent dignity and of the equal and
inalienable rights of
<em
>all members
</em>
of the human family
is the foundation of freedom, justice and peace in the world,
…
</div>
<p style="font-style: italic;">
Emphasis, mine.
</p>
</body>
</html>
