1. Today’s objectives Site performance Padding, Margins, Borders
Practice layout

2. The Need for Speed (Site Performance)
Performance of your site- limiting file sizes and reducing the number of requests to the server.
Optimizing images so they are the smallest file size possible without sacrificing Quality
Minimize HTML and CSS documents by removing extra character spaces and line returns.

3. The Need for Speed (Site Performance)
Keep JavaScript to a minimum.
Add scripts in parallel with other page assets.
Don’t load unnecessary assets (such as images, scripts, or JavaScript libraries).
Reduce the number of times the browser makes requests of the server (known as HTTP requests). Every trip to the server in the form of an HTTP request takes a few milliseconds, and those milliseconds can really add up. All those little Twitter

4. Padding, Margins, and Borders
CSS

5. Padding, Margins, and Borders
Web browsers treat all html elements as boxes.
A tag is a box with content inside (text, graphic or other html element).
<div></div>
<ul></ul
<li></li>

6. Padding, Margins, and Borders
Other Element
TOP MARGIN
TOP BORDER
TOP PADDING
HELLO WORLD!
LEFT
PADDING
LEFT BORDER
RIGHT
PADDING
RIGHT BORDER
Other Element
LEFT MARGIN
RIGHT MARGIN
Other Element
BOTTOM PADDING
BOTTOM BORDER
BOTTOM MARGIN
Other Element

7. Padding, Margins, and Borders
Padding: space between the content and the content’s border.
Separates content from its border.
TOP BORDER
PADDING
PADDING
HELLO WORLD!
PADDING
PADDING

8. Padding, Margins, and Borders
Border: line drawn around each edge of the box.
Can be four sides, on any single side, or any combination of sides.
HELLO WORLD!

9. Padding, Margins, and Borders
Border style values:
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders.
groove: Defines a 3D grooved border.
ridge: Defines a 3D ridged border.
inset: Defines a 3D inset border.
outset: Defines a 3D outset border.
HELLO WORLD!

10. Padding, Margins, and Borders
Background-color: fills space inside border, including padding area.
Margin separates one element from another.

11. Margins Other Element TOP MARGIN LEFT MARGIN RIGHT MARGIN
HELLO WORLD!
Other Element
LEFT MARGIN
RIGHT MARGIN
Other Element
BOTTOM MARGIN
Other Element

12. Padding, Margins, and Borders
Padding adds space between the content, and the border and keeps the content from appearing cramped inside the box.
Margins add white space (gutter) between elements giving the overall look of the page a lighter appearance.

13. Padding, Margins, and Borders
Four properties control padding: padding-top, padding-right, padding-bottom, and padding-left.
Four properties control margin edges: margin-top, margin-right, margin-bottom, and margin-left.
padding-top : 5px;
padding-right : 5px;
padding-bottom : 5px;
padding-left : 5px;
margin-top : 5px;
margin-right : 5px;
margin-bottom : 5px;
margin-left : 5px;
padding: 10px 5px 5px 10px;
margin: 0 10px 10px 20px;

14. Padding, Margins, and Borders
The order of the four values is:
top, right, bottom, and left.
TRouBLe - Top, Right, Bottom, and Left.
padding: 10px 5px 5px 10px;
margin: 0 10px 10px 20px;
Shortcut
padding-top : 5px;
padding-right : 5px;
padding-bottom : 5px;
padding-left : 5px;
margin-top : 5px;
margin-right : 5px;
margin-bottom : 5px;
margin-left : 5px;

15. Padding, Margins, and Borders
When value is 0, don’t need measurement unit (e.g., em, px).
Use margin: 0; instead of margin: 0px;.
When same value for all four sides, use a single value margin: 5px;

16. Padding, Margins, and Borders
When same value for both top and bottom and another value for left and right, use two values:
margin : 0 2em;
Sets top and bottom margins to 0; left and right margins to 2ems.

17. Collapsing margins - two margins actually become one.
Bottom margin of unordered list = 30 pixels.
Top margin of a following paragraph = 20 pixels.
You think: 30px + 20px = 50px spacing
BUT browser uses the largest margin (30px)
You can use padding to get around this issue.

18. Collapsing margins - two margins actually become one.
Browser does NOT add two vertical margins values but applies larger of the two margins.
Item1
Item2
Items 3 – margin bottom 30px
30px not 50px
Paragraph – margin top 20 px

19. Collapsing margins - two margins actually become one.
Add box <div> titled SPECIALS and then add a 25px to top and bottom margins to separate box from the heading above and paragraph below.
Add a heading <h1> inside SPECIALS and put 20px to top and bottom margins of <h1>.
Does this add 20 pixels of space between the <div class=“SPECIALS> and <h1>? NO!
Margin appears above the div.

20. Collapsing margins All margins = 0 <h1>Topic A</h1>
<div class=“special">
<h1>Topic B</h1>
<p>Students learn precepts of Web design that…</p>
</div>
<p>Students will be…</p>
<DIV class=“SPECIALS”>
All margins = 0

21. Collapsing margins Add 20px top & bottom margin to SPECIALS DIV –
<h1>Topic A</h1>
<div class=“special">
<h1>Topic B</h1>
<p>Students learn precepts of Web design that…</p>
</div>
<p>Students will be…</p>
Add 20px top & bottom margin to SPECIALS DIV –
makes sense!

22. Collapsing margins
<h1>Topic A</h1>
<div class=“special">
<h1>Topic B</h1>
<p>Students learn precepts of Web design that…</p>
</div>
<p>Students will be…</p>
Add 40px top & bottom margin to Topic B heading. CONFUSING!
Top margin NOT added above “Topic B” but added above the DIV below
Topic A.

23. Collapsing margins Border added to SPECIALS DIV
<h1>Topic A</h1>
<div class=“special">
<h1>Topic B</h1>
<p>Students learn precepts of Web design that…</p>
</div>
<p>Students will be…</p>
Border added to SPECIALS DIV
Top margin IS now added about “Topic B” and NOT added above the DIV.

24. Collapsing margins All margins = 0; No border
SPECIALS DIV: 20px Top|bottom; No Border
Special DIV
Topic B: 40px Top|bottom; No border
Border added to Special DIV
H1 Topic B

25. Collapsing margins Getting around this problem:
Add padding <div> SPECIALS or
Add border
Padding and border sit between the two margins, the margins no longer touch, and the <h1> margin appears within the <div>

26. Collapsing margins
Horizontal (left and right) margins and margins between floating elements don’t collapse in this way.
Absolutely and relatively positioned elements don’t collapse either.

27. Block boxes and inline boxes
Although web browsers treat every tag as a kind of box, not all boxes are alike.
Block boxes and inline boxes—that correspond to the two types of tags—block-level and inline tags.

28. Block boxes and inline boxes
A block-level tag creates a break before and after it. <p> <h1>,<div>, etc.
Inline tags don’t create a break before or after them.
<span>, <em>, <strong>

29. Block and inline elements
Top or bottom margins and padding do NOT increased or decrease height of inline elements.
Make a in-level element act like an Block element:
Must use display : block;
em {
padding-top: 20px;
padding-bottom: 20px;
display: block; }

30. Block and inline elements
Make a block-level element act like an inline element: display: inline;
ul li {
display: inline; }
This is useful for setting navigation items

31. CSS – Clark video