Making sense of CSS - Build Windows 8 Apps with HTML5 and JavaScript - page 64

Defining padding
The padding property defines how many pixels should be added around the element. Additional
pixels inherit the same background settings of the element. You typically use padding to add some
spacing around the actual content (that is, text) of the element, as shown in Figure 3-7.
FIGURE 3-7 The effect of padding HTML elements.
If you set the padding property, then padding is even all around the element. However, you can set
padding for each side of the element. You do that through properties such as padding-top , padding-
left , padding-bottom, and padding-right .
Defining borders
You can control borders of an HTML element through the border property. If you set this property,
then each side of the element is styled in the same way. To configure each side separately, you use
specific subproperties such as border-top , border-left , border-bottom, and border-right .
While styling a border, you can indicate width, color, radius, and style. Each of these aspects has
its own subproperty such as border-width, border-color, border-radius, and border-style . You express
width and radius (for rounded corners) in pixels, while using CSS color strings to express colors. Here's
an example:
.rounded-button {
color: #ffffff; /* white */
background: linear-gradient(to bottom, blue, white 80%, red);
border-radius: 5px;
border-width: 1px;
border-color: #ffffff; /* white */
}
An element border can be a solid, dotted, or dashed line. Just solid, dotted, and dashed are feasible
values for the border-style subproperty.
Defining margins
In HTML, the margin is the distance that exists between a given element and its neighbors. Unlike
padding, the space indicated by margins is not rendered as part of the element. That area displays
any underlying content belonging to parent elements.
You express margins in pixels, and you can set margins independently through usual
subproperties: margin-top , margin-left , margin-bottom, and margin-right . For example, if you set