Page 105 - DCAP408_WEB_PROGRAMMING

Unit 4: Cascading Style Sheets

Notes
Example:
P {border: solid red}
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
H1 {border-bottom: thick solid}
H1 {border-bottom: thick solid red}
H1 {border-width: thin} /* thin thin thin thin */
H1 {border-width: thin thick} /* thin thick thin thick */
H1 {border-width: thin thick medium} /* thin thick medium thin */
H1 {border-width: thin thick medium thin} /* thin thick medium thin */

4.4.8 Padding Properties

In CSS, the fundamental visual rendering model places all components of the document tree in
physical and virtual rectangular boxes, each having a specific height and width. An element’s rendering
box consists of an element’s content at the center (text, images, etc.) Surrounding the element’s
content (moving outward in rectangular layers/strips) are optional padding, surrounded by any
optional border effects, surrounded in turn by any optional margin values that may be specified.
The padding properties allow the author to specify how much space will be inserted between
the element border and the element content. Negative values are not allowed.
Each side of the padding dimensions (top, right, bottom and left) can be addressed and controlled,
independently using separate properties, or a convenient shorthand notation may be used that
controls multiple sides at once.

Padding — Individual Sides

In CSS, it is possible to specify different padding for different sides such as:
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Padding — Shorthand Property

To shorten the code, it is possible to specify all the padding properties in one property. This is
called a shorthand property. The shorthand property for all the padding properties is "padding":

Example: padding:25px 50px;
The padding property can have from one to four values.
 padding:25px 50px 75px 100px;
 top padding is 25px
 right padding is 50px

LOVELY PROFESSIONAL UNIVERSITY 99