Padding can be applied to the outside edges of the content are of any block level or inline element. Padding creates the space between the edge of the element and its content. Like margins, padding can be applied to individual sides of a box: p {padding: 10px;} h1{padding-top: 0px;} h2{padding-right: 0px;} h3{padding-left: 0px;} h4{padding-bottom: 0px;} Padding can also be applied using a single shorthand property Read More...
When designing a CSS based website it is very useful to understand Margins. I have found that it is much easier to deal with browser compatibility when one uses proper margin styles. Trying to set a top: -10px seems to cause browser issues that can be easily avoided by using margin-top:-10px. Margins can be applied to the outside of any block level or inline element Read More...
The content are of a box can be given width, height, and color. Width and height can be specified in points (equal to 1/72 of an inch), picas (equal to 12 points), pixels, ems, exes, millimeters, centimeters, inches, or percents. p { width: 100pt ;} p { width: 20pc;} p { width: 300px;} p { width: 40em;} p { width: 50ex;} p { width: 600mm;} p { width: 8in;} p { width: 50%;} The color property can be used to style the text color Read More...
The border properties specify the width, color and style of the border of an element. Shorthand border properties include border-top, border-bottom, border-right, border-left and border. p {border-top: 1px solid red} p {border-right: 2px solid blue} p {border-bottom: 1px solid red} p {border-top: 2px solid black} h1 {border: 1px solid black}
Margins can be applied to the outside of any block level or inline element. They create space between the edge of an element and the edge of any adjacent elements. Margins can be applied to individual sides of a box: p { margin-top: 0;} p { margin-right: -5px;} p { margin-bottom: 10px;} p { margin-left: 5px;} Margins can also be applied using a single shorthand property Read More...
Setting the Box Width The width of an element is applied to the content area. Other measurements such as padding, border and margins are added to this width. For example, if an element is specified with width: 200px; the content area is 200px wide. If padding, boder, or margin are applied to the same element, their measurements are added to the overall width Read More...
Home