Padding, Margins, and Borders

1. Padding, Margins, and Borders CSS The Definitive Guide Chapter 8

2. CSS makes it easier… • Allows one to define borders for • paragraphs • headings • divs • anchors • images • and more

3. These borders can.. • Set elements apart from others • Accentuate its appearance • Mark certain kinds of data as having been changed • Or any other number of other things

7. Padding • 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.

8. Margins.. • Is that area that is beyond the border

9. Padding, Borders, and Margins • All of these properties affect how the entire document is laid out and affect the appearance of a given document!

10. Basic Element Boxes 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.

12. Width and Height • 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

13. Margins • 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.

14. 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.

15. Example of using length with margins… p { background-color: silver; margin: 10px; } 10 pixels of space have been added to each side of the content area.

16. Using margins to set extra space around an image… img { margin: 1em; } This would put 1 em of space surrounding all images.

17. Remember what em equals? 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.

18. Different space on each side.. 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

19. Percentages and Margins 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%; }

20. Replicating values 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.

21. Single-Side Margins 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;}

22. Negative and Collapsed 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.

23. 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.

24. Borders Every border has three aspects • width or thickness • Style or appearance • 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.

25. Borders with Style 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

27. It is possible to define more than one style for a given border. p.new1 {border-style: solid dotted dashed solid;}

28. Border widths

29. 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 red right border is green bottom border is blue left border is pink border-color: red green blue; top border is red right and left borders are green bottom border is blue border-color: red green; top and bottom borders are red right 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.

30. Try coding border-style and border-color http://www.w3schools.com/cssref/tryit.asp?filename=trycss_border-color

33. 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;}

34. Padding By default elements have no padding.

36. Summary 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.

37. Lab Tonight: • 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.