-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweek2_technical.html
73 lines (60 loc) · 3.52 KB
/
week2_technical.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Melissa McCoy</title>
<link href="stylesheets/reset.css" type="text/css" rel="stylesheet">
<link href="stylesheets/blog.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="header">
<div class="container">
<div class="logo">
<h1>Melissa McCoy</h1>
<h2>Entrepreneur | Engineer | Sweets Lover</h2>
</div>
<div class="nav">
<ul>
<li><a href="about_me.html">About Me</a></li>
<li><a href="week4_cultural_blog.html">Culture</a></li>
<li><a href="week4_technical.html">Tech</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div class="container">
<h1>Display: Inline versus Display: Inline-Block</h1>
<h2>May 24, 2014</h2>
<div id="text">
<p>Web browsers render or display different elements in different ways. Each element has an inherently defined value of its "display" attribute. We have the ability of overriding this value by specifying our own value of Block, Inline, or Inline-Block.</p>
<h3>Display:Block</h3>
<p>Block-level elements have a definable width and height and automatically create a new row in the layout as they're created.</p>
<h3>Display:Inline</h3>
<p>Inline elements don't have a definable height and width and will not create new rows in a layout (thus they appear "inline"). Inline elements are generally the type of thing that you institute within a paragraph or other block-level element: strong, em, anchor, etc. Just as if the elements were inline text, spacing is automatically added between inline elements.</p>
<h3>Display:Inline-Block</h3>
<p>Inline-Block elements act like block elements, in that you can define their width and height, as well as inline elements, in that they sit next to each other inline. This can be used as an alternative to floating elements or absolute positioning when you want blocks to appear next to each other. There are two things to remember when using Inline-Block for this purpose. Firstly, all the blocks will have their bottoms aligned (regardless of their height) which is not usually desired. You can change this by using the vertical-align:(Baseline, Top, Bottom) property. Secondly, there will be automatically added whitespace between blocks. You can remove this if you set the blocks' margins to 0.</p>
</div>
<div id ="sidebar">
<ul>
<li><a href="week1_technical.html">Week 1 - My Fave Websites</a></li>
<li><a href="week2_technical.html">Week 2 - The Display Attribute</a></li>
<li><a href="week3_technical.html">Week 3 - Why JavaScript?</a></li>
<li><a href="week4_technical.html">Week 4 - Array#match Method</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="week4_technical.html">Tech</a></li>
<li><a href="week4_cultural_blog.html">Culture</a></li>
<li><a href="about_me.html">About Me</a></li>
</div>
<p>© 2014 Melissa McCoy No Rights Reserved</p>
</div>
</body></html>
<!DOCTYPE html>