16.2.2 Borders, Margins and Padding
CSS allows you to specify borders, margins, and padding around any element. The border of an element is a rectangle (or rounded rectangle in CSS3) drawn around (or partially around) it. CSS properties allow you to specify the style, color, and thickness of the border:
border: solid black 1px; /* border is drawn with a solid, black 1-pixel line */ border: 3px dotted red; /* border is drawn in 3-pixel red dots */
It is possible to specify the border width, style, and color using individual CSS properties, and it is also possible to specify the border for individual sides of an element. To draw a line beneath an element, for example, simply specify its border-bottomproperty. It is even possible to specify the width, style, or color of a single side of an element with properties such as border-top-width and border-left-color.
In CSS3, you can round all corners of a border with the border-radius property, and you can round individual corners with more explicit property names. For example:
The margin and padding properties both specify blank space around an element. The important difference is that margin specifies space outside the border, between the border and adjacent elements, and padding specifies space inside the border, between the border and the element content. A margin provides visual space between a (possibly bordered) element and its neighbors in the normal document flow. Padding keeps element content visually separated from its border. If an element has no border, padding is typically not necessary. If an element is dynamically positioned, it is not part of the normal document flow, and its margins are irrelevant.
You can specify the margin and padding of an element with the margin and padding properties:
margin: 5px; padding: 5px;
You can also specify margins and paddings for individual sides of an element:
margin-left: 25px; padding-bottom: 5px;
Or you can specify margin and padding values for all four edges of an element with the margin and padding properties. You specify the top values first and then proceed
16.2 Important CSS Properties | 423
clockwise: top, right, bottom, and left. For example, the following code shows two equivalent ways to set different padding values for each of the four sides of an element:
padding: 1px 2px 3px 4px; /* The previous line is equivalent to the following lines. */ padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;欢迎转载,转载请注明来自一手册:http://yishouce.com/book/1/31445.html