CSS: Box Model
Joel Ross
LIS 549
In this video...
-
The Box Model
-
Changing display type
-
Positioning
Box Model
All HTML elements take up space on a page based on their "box size". You can manipulate the box model to change the size and appearance of the element
<div class="cow">
<p>Moo moo moo.</p>
<p>Moooooooooooooooooooo.</p>
</div>
<div class="sheep">
<p>Baa baa <span class="dark">black</span> sheep,
have you any wool?</p>
</div>
block element (line break after)
inline element
Block and Inline
All HTML elements are either block elements (default box takes up the width of the page, and is followed by a "line break") or inline elements (default box takes up the size of the content, and is inline with other text).
Display Property
You can customize whether an element is displayed as a block or inline element using the display property.
Choose elements based on their semantics, not their appearance!
/* <li> elements will be inline (an inline list!) */
li {
display: inline;
}display: inline-block
You cannot set the width or height of an inline element, but you can adjust the size of an inline-block element.
Position
You can use the position property to adjust where an element appears on the page from its normal layout. You will also need to set position adjustment values top, left, bottom, and/or right
/* position element 20px up and to the right
* of where it "normally" would be */
img.badge {
position: relative;
top: 20px;
right: 20px;
}LIMIT USE OF THE
position AND float
PROPERTIES!
lis549-box-model
By Joel Ross
