Layout Techniques - Jump Start CSS - page 28

to the element. So, in the example just cited, this would apply 20px of padding to the
top, 10px to the right, 30px to the bottom, and 20px to the left.
Border
The border of an element is defined using the border property. This is a shorthand prop-
erty that defines the element's border-width , border-style , and border-
color . For example, border: 4px dashed orange .
Margin
Finally, the last part of the box model is the element's margin. Margins are similar to
padding, and are defined using similar syntax (for example, margin-left: 15px or
margin: 10px 20px 10px 20px ). However, unlike padding, the margin portion
of an element exists outside the element. A margin creates space between the targeted
element and surrounding elements.
Every element on a web page has these box model components. Sometimes the default char-
acteristics of these components differ on certain types of elements. For example, form ele-
ments start out with a certain width and height, even if you don't define those properties.
Also, as mentioned in Chapter 1 , unordered lists ( <ul> elements,) will start out with pre-
defined margins and padding due to the browser's internal stylesheet, even if those are not set
in the CSS.
Block versus Inline
Another concept you should be familiar with is that most HTML elements fall under two cat-
egories: block or inline. A block-level element is more of a structural, layout-related element,
while an inline-level element is usually found inside of block-level elements, flowing in the
same context as text.
Block-level elements include elements like <div> , <p> , and <section> , whereas inline
elements include <span> , <b> , and <em> . These are just a few examples.
Using CSS, you can change an element's default behavior in this regard by using the display
property, like this: