© Mikael Olsson 2019
Mikael OlssonCSS3 Quick Syntax Referencehttps://doi.org/10.1007/978-1-4842-4903-1_16

16. Box Model

Mikael Olsson1 
(1)
Hammarland, Finland
 
The so-called box model of CSS describes the space that is taken up by an HTML element. In this model, each element consists of four boxes: content, padding, border, and margin, as illustrated in Figure 16-1.
../images/320834_2_En_16_Chapter/320834_2_En_16_Fig1_HTML.png
Figure 16-1

CSS box model

Each of the three boxes surrounding the content can have different sizes on the top, right, bottom, and left of the element. Any or all of these sizes can also be set to zero.

Inline and Block

HTML has two primary categories of elements: block and inline. The box model applies differently to these two kinds of elements, so it is important to know the difference between them. Examples of inline elements include <a>, <strong> and <em>, whereas <p>, <h1>, and <form> are block elements.

Inline elements flow along with text content and are split as necessary to fit the width of their container. They may not contain block elements, with the exception of the <a> element, which can wrap any type of element.

Block elements can contain both block and inline elements (see Figure 16-2). They break the flow of text by creating a virtual box around themselves that expand horizontally, making it appear as if there are line breaks before and after each block element. Because of these properties, block elements are also referred to as boxes or containers.
../images/320834_2_En_16_Chapter/320834_2_En_16_Fig2_HTML.png
Figure 16-2

Block and inline elements

The boxes surrounding inline and block elements have different features. A block element can manipulate all properties in the box model, including the width and height of the content area, as well as the border, padding, and margin. If no width is set, a block element expands horizontally to the maximum allowed by the containing element.

An inline element is more limited in that it cannot set the vertical margins (top or bottom). It also cannot change the width or height of its inline box. For an inline element, the minimum height can be set with the line-height property, but the width and height adjust automatically to fit the content that the element holds.

There is a subcategory of inline elements, called replaced inline elements, that use external objects such as <img>, <video>, and <object>; and form elements such as <input> and <textarea>. With these inline elements, all box properties can be manipulated the same way as block elements.

Span and Div

Using the <span> and <div> elements is a generic way of adding structure to a web document. These elements have no styles associated with them, which makes them especially well suited to work with class and id selectors. The difference between the two is that <span> is an inline element whereas <div> is a block element.
<span>Inline</span>
<div>Block</div>
As an inline element, <span> is mainly used to add styling to sections of text. It cannot be used for styling block elements because such elements are not allowed inside of inline elements according to the HTML specification.
<span style="color: red;">Red text</span>
In contrast, <div> is used to create styled containers for other block and inline elements. These custom containers are often what make up the layout of a web page. Because it is a block element, <div> allows all the element’s box attributes to be manipulated (width, height, padding, border, and margin).
<div class="a">
  <div class="b">Block within a block</div>
</div>

Semantic Elements

In HTML 4, the generic <div> element was the main element used for defining sections of a web page to be formatted with CSS. It did not convey any semantic meaning, which was considered a shortcoming of the language. The HTML 5 specification introduced a number of other structural elements you are encouraged to use, such as <header>, <footer>, <section>, <article>, and <nav>.

These new container elements are preferred when they are appropriate given the context, for accessibility and maintainability reasons. Whenever there is not a more semantically suitable element available, the <div> element is still appropriate and continues to be widely used as a generic container. HTML 5 elements became supported in Chrome 6+, Firefox 4+, Safari 5+, Opera 11.5+ and IE 9+.

CSS styling of HTML 5 elements can be added in IE 6-8 with the HTML 5 Shiv script. 1 This JavaScript file can be downloaded and referenced using IE conditional comments, so that it will not affect the performance of modern web browsers:
<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->
Firefox 3+, Safari 3.1+, and Opera 10+ already allow styling of unknown elements. However, to behave as expected those elements need to be explicitly set to display as block elements since this is not the default styling.
header, footer, section, article, aside, details, figcaption, figure, hgroup, menu, nav {
  display: block;
}
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.227.228.95