HTML and CSS Reference
In-Depth Information
of text, whereas block elements cause line breaks before and after. This
visual presentation can also be controlled by CSS through the display
property by setting the value to either inline or block .
A simple example will illustrate the key differences. Here are three
<div> elements:
<div>1</div> <div>2</div> <div>3</div>
The following styles show the elements' position and shape:
div {
width: 2.5em;
height: 2.5em;
margin: 0.5em;
padding: 0.5em;
border: 5px dashed black;
}
Setting the display property to block causes all
three elements to sit on a line by themselves,
each with the width, height, padding, and mar-
gin specified:
div { display: block; }
Of course, a <div> element is display: block by
default, so explicitly stating it in CSS isn't nec-
essary.
Setting the <div> elements to display: inline
has a drastic effect:
div { display: inline; }
Not only are the elements now sitting on the
same line, but they're considerably smaller.
This is because the width and height properties
don't apply to inline elements, so each <div> is
now the size of its content plus the margin
specified.
 
Search WWH ::




Custom Search