Inline, Block and Positioning in CSS
-
Upload
uc-berkeley-graduate-school-of-journalism -
Category
Education
-
view
675 -
download
2
description
Transcript of Inline, Block and Positioning in CSS
![Page 1: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/1.jpg)
Inline vs Block
![Page 2: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/2.jpg)
Block
<div></div>
<div></div>
<div></div>
![Page 3: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/3.jpg)
Inline
<span></span>
<span></span>
<span></span>
![Page 4: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/4.jpg)
Examples of each
<div> <p> <h1> <ul>/<li>
Block Elements Inline Elements
<span> <a> <strong> <img>
With CSS, you can switch these! (e.g. you can make divs inline or spans block)
![Page 5: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/5.jpg)
Understanding Rules of Block Elements
• A <div> tag, (or any block element) will be invisible by default.
![Page 6: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/6.jpg)
Understanding Rules of Block Elements
• A <div> tag, (or any block element) will be invisible by default.
• A <div> tag (or any block element) will span the length of the browser by 100% by default.
![Page 7: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/7.jpg)
Understanding Rules of Block Elements
• A <div> tag, (or any block element) will be invisible by default.
• A <div> tag (or any block element) will span the length of the browser by 100% by default.
• A <div> tag (or any block element) will conform to its content if no height is set.
![Page 8: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/8.jpg)
Understanding Rules of Block Elements
• A <div> tag, (or any block element) will be invisible by default.
• A <div> tag (or any block element) will span the length of the browser by 100% by default.
• A <div> tag (or any block element) will conform to its content if no height is set.
• A <div> tag will stack from top down, regardless of the width.
![Page 9: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/9.jpg)
Exercise
Step 1: Create two <div> tags below everything you've done so far, give them class="example1"
![Page 10: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/10.jpg)
Exercise
Step 1: Create two <div> tags below everything you've done so far, give them class="example1"
<div class="example1"></div> <div class="example1"></div>
!
By default, <div> tags are invisible.
![Page 11: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/11.jpg)
ExerciseStep 2: In your <style> tag, add a CSS rule that targets the div, and set's border: 1px solid black;
![Page 12: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/12.jpg)
ExerciseStep 2: In your <style> tag, add a CSS rule that targets the div, and set's border: 1px solid black;
.example1{ border: 1px solid black; }
!
By default, block elements span the width of the page.
![Page 13: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/13.jpg)
Exercise
Step 3: In the <div> tags, add two sentences about yourself.
![Page 14: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/14.jpg)
Exercise
Step 3: In the <div> tags, add two sentences about yourself.
<div…>I feel fine.</div> <div…>I think.</div> !
By default, block elements conform to their content if no height is set.
![Page 15: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/15.jpg)
ExerciseStep 4: In your <style> tag, add another CSS rule to the div selector: height: 100px;
![Page 16: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/16.jpg)
ExerciseStep 4: In your <style> tag, add another CSS rule to the div selector: height: 100px;
.example1{ height:100px; }
!
If a height is specified, it takes precedence over the content.
![Page 17: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/17.jpg)
ExerciseStep 5: In your <style> tag, add more CSS rules: width: 100px; background: red;
![Page 18: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/18.jpg)
ExerciseStep 5: In your <style> tag, add more CSS rules: width: 100px; background: red;
.example1{ height:100px; width:100px; background: red; } Stacks from the top down.
![Page 19: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/19.jpg)
ExerciseStep 6: In your <style> tag, set the overflow property: overflow:hidden;
![Page 20: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/20.jpg)
ExerciseStep 6: In your <style> tag, set the overflow property: overflow:hidden;
.example1{ overflow:hidden; } This controls what happens to things that protrude from the box.
![Page 21: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/21.jpg)
Understanding rules of inline elements
• By default a <span> tag (or any inline element) will not create a new line, but instead will continue stacking from the left, like text.
![Page 22: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/22.jpg)
Understanding rules of inline elements
• By default a <span> tag (or any inline element) will not create a new line, but instead will continue stacking from the left, like text.
• If there isn't enough browser width to fit inline elements, they automatically shift to the next line.
![Page 23: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/23.jpg)
Understanding rules of inline elements
• By default a <span> tag (or any inline element) will not create a new line, but instead will continue stacking from the left, like text.
• If there isn't enough browser width to fit inline elements, they automatically shift to the next line.
• Height is defined by "line-height", and width is defined by the text flow; you cannot set a height or width.
![Page 24: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/24.jpg)
Understanding rules of inline elements
• By default a <span> tag (or any inline element) will not create a new line, but instead will continue stacking from the left, like text.
• If there isn't enough browser width to fit inline elements, they automatically shift to the next line.
• Height is defined by "line-height", and width is defined by the text flow; you cannot set a height or width.
• Generally, inline elements may only contain content, data or other inline elements (not block elements)
![Page 25: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/25.jpg)
ExerciseStep 1: Create multiple span tags, each one surrounding two words of the following aphorism: "It's all storytelling, you know. That's what journalism is all about" -Tom Brokaw"
![Page 26: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/26.jpg)
ExerciseStep 1: Create multiple span tags, each one surrounding two words of the following aphorism: "It's all storytelling, you know. That's what journalism is all about" -Tom Brokaw"
<span>It's all </span> <span>storytelling </span>
!
Inline elements stack from the left. If you had used <div> tags, it would stack from top down.
![Page 27: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/27.jpg)
Exercise
Step 2: Shrink your browser window to see how the span tags will drop down to the next line.
![Page 28: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/28.jpg)
Exercise
Step 2: Shrink your browser window to see how the span tags will drop down to the next line.
If there isn't enough room, span tags will drop to the next line.
![Page 29: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/29.jpg)
ExerciseStep 3: Add the following CSS rules to the span selector: height: 100px; width: 100px;
![Page 30: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/30.jpg)
ExerciseStep 3: Add the following CSS rules to the span selector: height: 100px; width: 100px;
span{ width : 100px; height: 100px; } Nothing happens! Height is defined by the line-height property, and width is defined by content.
![Page 31: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/31.jpg)
ExerciseStep 4: Add the following CSS rules to the span selector: line-‐height:100px;
![Page 32: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/32.jpg)
ExerciseStep 4: Add the following CSS rules to the span selector: line-‐height:100px;
span{ line-‐height:100px; } !Line height is the space between lines.
![Page 33: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/33.jpg)
RecapBlock elements (layout): • Stacks from the top down, they conform to the
content unless you set a width/height. !
Inline elements (content): • Works like text, stacks from the left. Cannot
set a width and height on these.
![Page 34: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/34.jpg)
RecapBlock elements (layout): • Stacks from the top down, they conform to the
content unless you set a width/height. !
Inline elements (content): • Works like text, stacks from the left. Cannot
set a width and height on these.
Fortunately, we will be working mostly with block elements, which
are easier to understand.
![Page 35: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/35.jpg)
The Box Model
![Page 36: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/36.jpg)
Box model applies to BLOCK only
he l loMargin Border Padding
Width
![Page 37: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/37.jpg)
Box Model
Any padding, borders or margin are in addition to the width of the box.
![Page 38: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/38.jpg)
HTML:
CSS:#container{ width: 960px; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
![Page 39: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/39.jpg)
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
![Page 40: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/40.jpg)
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
![Page 41: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/41.jpg)
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
![Page 42: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/42.jpg)
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; padding: 5px; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
![Page 43: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/43.jpg)
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; padding: 5px; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
960px
![Page 44: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/44.jpg)
HTML:
CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; padding: 5px; }
<div id="container"> ! <div id="navigation"> </div> !</div>
960px
960px
![Page 45: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/45.jpg)
Pop Quiz
![Page 46: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/46.jpg)
What is the width of this box?
he l lo20px 2px 10px
200px
![Page 47: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/47.jpg)
200 pixels
What is the width of this box?
he l lo20px 2px 10px
200px
![Page 48: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/48.jpg)
What is the width and padding combined?
he l lo20px 2px 10px
200px
![Page 49: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/49.jpg)
220 pixels
What is the width and padding combined?
he l lo20px 2px 10px
200px
![Page 50: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/50.jpg)
What is the width and padding and border combined?
he l lo20px 2px 10px
200px
![Page 51: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/51.jpg)
224 pixels
What is the width and padding and border combined?
he l lo20px 2px 10px
200px
![Page 52: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/52.jpg)
What is the total (outer) width?
he l lo20px 2px 10px
200px
![Page 53: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/53.jpg)
200 + 20 + 20 + !10 + 10 + 2 + 2 =!
!
264 pixels
What is the total (outer) width?
he l lo20px 2px 10px
200px
![Page 54: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/54.jpg)
padding and margins
padding:
![Page 55: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/55.jpg)
padding and margins
padding:10px;
![Page 56: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/56.jpg)
padding and marginspadding:10px 5px 1px 0;
![Page 57: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/57.jpg)
padding and marginspadding:10px 5px 1px 0;
top
![Page 58: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/58.jpg)
padding and marginspadding:10px 5px 1px 0;
top right
![Page 59: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/59.jpg)
padding and marginspadding:10px 5px 1px 0;
top right
bottom
![Page 60: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/60.jpg)
padding and marginspadding:10px 5px 1px 0;
top right
bottom
left
![Page 61: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/61.jpg)
padding and marginspadding:10px 5px 1px 0;
top right
bottom
left
![Page 62: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/62.jpg)
padding and margins
margin: 5px 15px 1px 10px;
![Page 63: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/63.jpg)
padding and margins
margin: 5px 15px 1px 10px;
top
![Page 64: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/64.jpg)
padding and margins
margin: 5px 15px 1px 10px;
top right
![Page 65: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/65.jpg)
padding and margins
margin: 5px 15px 1px 10px;
top right bottom
![Page 66: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/66.jpg)
padding and margins
margin: 5px 15px 1px 10px;
top right bottom left
![Page 67: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/67.jpg)
padding and margins
padding:10px 2px;
![Page 68: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/68.jpg)
padding and margins
padding:10px 2px;
top!bottom
![Page 69: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/69.jpg)
padding and margins
padding:10px 2px;
top!bottom
right!left
![Page 70: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/70.jpg)
Pop Quiz
![Page 71: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/71.jpg)
Explain the size of the margins around the box
margin: 5px 25px;
![Page 72: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/72.jpg)
Top and bottom are 5 pixels, !left and right are 25 pixels.!
Explain the size of the margins around the box
margin: 5px 25px;
![Page 73: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/73.jpg)
Explain the size of the padding inside this box
padding: 1px 1px 1px 40px;
![Page 74: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/74.jpg)
Top, right, bottom are 1 pixel,!the left side is 40 pixels
Explain the size of the padding inside this box
padding: 1px 1px 1px 40px;
![Page 75: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/75.jpg)
Explain the size of the margins around the box
margin: 0 5px;
![Page 76: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/76.jpg)
Top, right are 0 pixels,!the left and right side is 5 pixels
Explain the size of the margins around the box
margin: 0 5px;
![Page 77: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/77.jpg)
Explain the size of the padding inside the box
padding: 15px;
![Page 78: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/78.jpg)
All sides are 15 pixels
Explain the size of the padding inside the box
padding: 15px;
![Page 79: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/79.jpg)
Margins, Padding, Width
he l loMargin Border Padding
Width
![Page 80: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/80.jpg)
Box model
![Page 81: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/81.jpg)
Box model
![Page 82: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/82.jpg)
Box model
![Page 83: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/83.jpg)
Box model
![Page 84: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/84.jpg)
More on responsiveness
![Page 85: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/85.jpg)
Set widths as percentages
<div></div>
Setting width as a percentage will keep it relative to browser width
100%
![Page 86: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/86.jpg)
Browsers don't know how to deal with heights
<div></div>
Heights don't exist in most cases because the user can scroll
???
Many times you have to manually set a height.
![Page 87: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/87.jpg)
Exceptions: Images/Video
<img src="…" width="100%" height="auto"> !!<video width="100%" height="auto">
![Page 88: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/88.jpg)
Exceptions: Images/Video
<img src="…" width="100%" height="auto"> !!<video width="100%" height="auto">
![Page 89: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/89.jpg)
Video
![Page 90: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/90.jpg)
The problem with online video
Each browser is only compatible with certain types of video
<video width="100%" height="auto"> !!!!</video>
![Page 91: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/91.jpg)
The problem with online video
Each browser is only compatible with certain types of video
<video width="100%" height="auto"> !!!!</video>
<source src="video.mp4" type="video/mp4">
Chrome/Safari/iOS
![Page 92: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/92.jpg)
The problem with online video
Each browser is only compatible with certain types of video
<video width="100%" height="auto"> !!!!</video>
<source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg">
Chrome/Safari/iOS Firefox
![Page 93: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/93.jpg)
The problem with online video
Each browser is only compatible with certain types of video
<video width="100%" height="auto"> !!!!</video>
<source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> <source src="video.webm" type="video/webm">
Chrome/Safari/iOS Firefox Internet Explorer
![Page 94: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/94.jpg)
The problem with online video
Each browser is only compatible with certain types of video
<video width="100%" height="auto"> !!!!</video>
<source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg"> <source src="video.webm" type="video/webm">
Chrome/Safari/iOS Firefox Internet Explorer
<img src="fallback.jpg">
![Page 95: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/95.jpg)
Positioning
![Page 96: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/96.jpg)
#sometag{ !
position: static; !
}
![Page 97: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/97.jpg)
#sometag{ !
position: static; !
}
![Page 98: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/98.jpg)
• Static - This is the default positioning. Elements are arranged according to the normal document flow.
![Page 99: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/99.jpg)
• Static - This is the default positioning. Elements are arranged according to the normal document flow.
• Relative - This is identical to static, but causes elements inside this tag to use it as a frame of reference.
![Page 100: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/100.jpg)
• Static - This is the default positioning. Elements are arranged according to the normal document flow.
• Relative - This is identical to static, but causes elements inside this tag to use it as a frame of reference.
• Absolute - Elements are positioned separate from the document flow. Items will be located relative to its parent element.
![Page 101: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/101.jpg)
• Static - This is the default positioning. Elements are arranged according to the normal document flow.
• Relative - This is identical to static, but causes elements inside this tag to use it as a frame of reference.
• Absolute - Elements are positioned separate from the document flow. Items will be located relative to its parent element.
• Fixed - Position elements separate from the document flow, but relative to the browser. Stays in the same spot even when scrolled.
![Page 102: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/102.jpg)
![Page 103: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/103.jpg)
![Page 104: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/104.jpg)
position: static;
![Page 105: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/105.jpg)
![Page 106: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/106.jpg)
#box{ position: absolute; top: 25px; left: 25px; }
![Page 107: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/107.jpg)
#box{ position: absolute; top: 25px; left: 25px; }
25
25
![Page 108: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/108.jpg)
#box{ position: absolute; top: 25px; left: 25px; }
25
25
![Page 109: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/109.jpg)
#box{ position: absolute; top: 25px; left: 25px; }
25
25
#container{ position: relative; }
![Page 110: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/110.jpg)
#box{ position: absolute; top: 25px; left: 25px; }
25
25
#container{ position: relative; }
![Page 111: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/111.jpg)
HTML:
CSS:#container{
position: relative; } !#box{ position: absolute; }
<div id="container"> ! <div id="box"></div> !!</div>
![Page 112: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/112.jpg)
Pop Quiz!
![Page 113: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/113.jpg)
What type of positioning should the outer container be?
![Page 114: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/114.jpg)
relative!
What type of positioning should the outer container be?
![Page 115: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/115.jpg)
What type of positioning should content inside the container be, when you want to position it?
![Page 116: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/116.jpg)
absolute!
What type of positioning should content inside the container be, when you want to position it?
![Page 117: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/117.jpg)
z-index
![Page 118: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/118.jpg)
![Page 119: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/119.jpg)
• z-index property is an arbitrary number that determines the stacking order.!
• A higher z-index number will indicate those elements should be on top. A lower number means they should appear underneath other elements.!
• z-index property can only be applied to elements that are positioned with relative, absolute or fixed, but not the default static.
![Page 120: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/120.jpg)
HTML:
CSS:#redbox{ position:absolute; z-‐index: 938323; } #bluebox{ position:absolute; z-‐index: 10; } #greenbox{
z-‐index: 9999999999; }
<div id="container"> <div id="redbox"></div> <div id="bluebox"></div> <div id="greenbox"></div> </div>
![Page 121: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/121.jpg)
HTML:
CSS:#redbox{ position:absolute; z-‐index: 938323; } #bluebox{ position:absolute; z-‐index: 10; } #greenbox{
z-‐index: 9999999999; }
<div id="container"> <div id="redbox"></div> <div id="bluebox"></div> <div id="greenbox"></div> </div>
![Page 122: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/122.jpg)
Pop Quiz
![Page 123: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/123.jpg)
Which element will display on top of the other?
#blue{ position: relative; z-‐index: 55;
}
#red{ position: absolute; z-‐index: 45;
}
![Page 124: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/124.jpg)
#blue!
Which element will display on top of the other?
#blue{ position: relative; z-‐index: 55;
}
#red{ position: absolute; z-‐index: 45;
}
![Page 125: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/125.jpg)
Which element will display on top of the other?
.bluebox{ position:static; z-‐index: 55;
}
#bluebox{ position: relative; z-‐index: 45;
}
![Page 126: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/126.jpg)
#bluebox!
Which element will display on top of the other?
.bluebox{ position:static; z-‐index: 55;
}
#bluebox{ position: relative; z-‐index: 45;
}
![Page 127: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/127.jpg)
Exercise
<div id="redbox" class="box"></div> <div id="bluebox" class="box"></div> <div id="greenbox" class="box"></div>
![Page 128: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/128.jpg)
Exercise
.box{ width:300px; height:300px; border:1px solid black; }
![Page 129: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/129.jpg)
Exercise
#bluebox{ !
background:blue; position: absolute; top: 50px; left:50px; !
}
![Page 130: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/130.jpg)
Exercise
#redbox{ !
background: red; position: absolute; top: 150px; left: 150px; !
}
![Page 131: Inline, Block and Positioning in CSS](https://reader033.fdocuments.us/reader033/viewer/2022052908/559469e81a28ab9e2b8b4586/html5/thumbnails/131.jpg)
Exercise
#greenbox{ !
background: green; position: absolute; top: 225px; left: 225px; !
}