Padding, Margins, and Borders

Padding, Margins, and Borders

CSS The Definitive GuideChapter 8

Allows one to define borders for paragraphs headings divs anchors images and more

CSS makes it easier…

Set elements apart from others Accentuate its appearance Mark certain kinds of data as having been

changed Or any other number of other things

These borders can..

Is defining regions around an element that control how the border is placed in relation to the content and how close other elements can get to that border.

In short the area between an element and its border is the padding.

Padding

Is that area that is beyond the border

Margins..

All of these properties affect how the entire document is laid out and affect the appearance of a given document!

Padding, Borders, and Margins

All documents generate a rectangular box called the element box.

Each box influences the position and layout of other element boxes.

By default boxes do not overlap each other so that they are visually rendered correctly.

Basic Element Boxes

The width of an element is defined as the distance from the left inner edge to the right inner edge and the height is the distance from the inner top to the inner bottom

Let check out some examples at w3schools.com

Width and Height

The separation between most normal-flow elements occurs because of element margins.

Setting a margin creates extra “blank space” around an element.

“Blank space” refers to an area in which other elements cannot also exist and in which the parent element’s background is visible.

Look at page 211 paragraphs with and without margins.

Margins

Can accept any length of measurement, pixels, inches, millimeters, or ems.

Default value is 0 (zero) Browsers come with pre-assigned styles for

many elements and that is the same with margins. In CSS-enabled browsers margins generate a “blank line” above and below the paragraph element.

You must declare margins for the p element if you don’t want the browser to apply the default.

Margins

p {background-color: silver; margin: 10px;}

10 pixels of space have been added to each side of the content area.

Example of using length with margins…

img { margin: 1em;}

This would put 1 em of space surrounding all images.

Using margins to set extra space around an image…

1em is equal to the current font size. 2em means 2 times the size of the current font.

if an element is displayed with a font of 12 pt, then '2em' is 24 pt.

The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.

Remember what em equals?

What if you wanted different spaces on each side of an element. That can be done as well.

H1 {margin: 10px 20px 15px 5px; }

The order is important! margin: top right bottom left

The four values go clockwise = TRBL

Different space on each side..

Percentages are computed in relation to the width of the parent element, so they change if the parent element’s width changes in some way.

Also margins can mix percentages with length values:

h1 {margin: 0.5em 10% 0.5em 10%; }

Percentages and Margins

p {margin; 0.25em 1em 0.25.em 1em; }

Can be the same as:

p {margin: 0.25em 1em; }The two values are enough to make the four.

If the value left is missing, use the value provided for right. If the value for bottom is missing, use the value provided for top. If the value for right is missing, use the value provided for top.

Replicating values

It is possible to set a margin on one side only.

h2 {margin-left: 3em;}

Or maybe two sides

h2 {margin-left 3em; margin-bottom: 2em;}

Single-Side Margins

Combining negative and positive margins can be useful. Paragraphs can be made to “punch out” of a parent element. A creative way to display text.

Negative and Collapsed Margins

Borders Inside the margins are the borders.

The border of an element is one or more lines that surround the content and padding of an element.

The background of the element will stop at the out border edge. Background does not extend into the margins, thus the border is just inside the margin.

Every border has three aspects1. width or thickness2. Style or appearance3. Color

Default width value = medium (usually 2 pixels)

Default style is zero. If a border has no style it doesn’t exist.

Default color value is foreground color of the element itself. If no color is declared for the border, it will be the same color as the text.

Borders

Without border styles there would be no borders.

In CSS there are 10 distinct non-inherit styles for the property border-style.

None | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | {1.4} | inherit

Borders with Style

It is possible to define more than one style for a given border.

p.new1 {border-style: solid dotted dashed solid;}

Border widths

The border-color property sets the color of an element's four borders. This property can have from one to four values.

Examples:border-color: red green blue pink; top border is redright border is greenbottom border is blueleft border is pink

border-color: red green blue; top border is redright and left borders are greenbottom border is blue

border-color: red green;top and bottom borders are redright and left borders are green

border-color:red;all four borders are red

◦ Note: Always declare the border-style property before the border-color property. An element must have borders before you can change the color.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_border-color

Try coding border-style and border-color

Padding Padding for the element box is between the

borders and content area. Accepts any length value or percentage

value.

If all h1 elements are to have 10 pixels of padding on all sides it would be written as:

h1 {padding: 10px; background-color: silver;}

PaddingBy default elements have no padding.

The ability to apply margins, borders and padding to any element is one of the things that sets CSS so far above traditional web markup.

Summary

Please have one of your h1 elements have a different space on each side using the margin values of your choice. (must have 4 values TRBL)

Please make at least two of your headings have a different color and different style.

Please also use padding in your code. Please use a border around one of your

paragraphs. Please use the 3 attributes of the border. (with, style, color)

Please provide comments with including date of coding as today’s date.

Lab Tonight: