Inline, Block and Positioning in CSS

Inline vs Block

Block

<div></div>

<div></div>

<div></div>

Inline

<span></span>

<span></span>

<span></span>

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)

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

Exercise

Step 1: Create two <div> tags below everything you've done so far, give them class="example1"

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.

ExerciseStep 2: In your <style> tag, add a CSS rule that targets the div, and set's border: 1px solid black;

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.

Exercise

Step 3: In the <div> tags, add two sentences about yourself.

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.

ExerciseStep 4: In your <style> tag, add another CSS rule to the div selector: height: 100px;

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.

ExerciseStep 5: In your <style> tag, add more CSS rules: width: 100px; background: red;

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.

ExerciseStep 6: In your <style> tag, set the overflow property: overflow:hidden;

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.

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.




• 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)

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"

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.

Exercise

Step 2: Shrink your browser window to see how the span tags will drop down to the next line.

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.

ExerciseStep 3: Add the following CSS rules to the span selector: height: 100px; width: 100px;

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.

ExerciseStep 4: Add the following CSS rules to the span selector: line-‐height:100px;

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.

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.

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.

The Box Model

Box model applies to BLOCK only

he l loMargin Border Padding

Width

Box Model

Any padding, borders or margin are in addition to the width of the box.

HTML:

CSS:#container{ width: 960px; }

<div id="container"> ! <div id="navigation"> </div> !</div>

960px

HTML:

CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; }


960px

HTML:

CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; }


960px

HTML:

CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; }


960px

HTML:

CSS:#container{ width: 960px; } #navigation{ width: 960px; background: gray; border: 5px solid red; padding: 5px; }


960px

HTML:



960px

960px

HTML:



960px

960px

Pop Quiz

What is the width of this box?

he l lo20px 2px 10px

200px

200 pixels

What is the width of this box?


200px

What is the width and padding combined?


200px

220 pixels

What is the width and padding combined?


200px

What is the width and padding and border combined?


200px

224 pixels

What is the width and padding and border combined?


200px

What is the total (outer) width?


200px

200 + 20 + 20 + !10 + 10 + 2 + 2 =!

!

264 pixels

What is the total (outer) width?


200px

padding and margins

padding:

padding and margins

padding:10px;

padding and marginspadding:10px 5px 1px 0;


top


top right


top right

bottom


top right

bottom

left


top right

bottom

left

padding and margins

margin: 5px 15px 1px 10px;

padding and margins


top

padding and margins


top right

padding and margins


top right bottom

padding and margins


top right bottom left

padding and margins

padding:10px 2px;

padding and margins

padding:10px 2px;

top!bottom

padding and margins

padding:10px 2px;

top!bottom

right!left

Pop Quiz

Explain the size of the margins around the box

margin: 5px 25px;

Top and bottom are 5 pixels, !left and right are 25 pixels.!


margin: 5px 25px;

Explain the size of the padding inside this box

padding: 1px 1px 1px 40px;

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;


margin: 0 5px;

Top, right are 0 pixels,!the left and right side is 5 pixels


margin: 0 5px;

Explain the size of the padding inside the box

padding: 15px;

All sides are 15 pixels

Explain the size of the padding inside the box

padding: 15px;

Margins, Padding, Width

he l loMargin Border Padding

Width

Box model

Box model

Box model

Box model

More on responsiveness

Set widths as percentages

<div></div>

Setting width as a percentage will keep it relative to browser width

100%

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.

Exceptions: Images/Video

<img src="…" width="100%" height="auto"> !!<video width="100%" height="auto">

Exceptions: Images/Video

<img src="…" width="100%" height="auto"> !!<video width="100%" height="auto">

Video

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




<source src="video.mp4" type="video/mp4"> <source src="video.ogv" type="video/ogg">

Chrome/Safari/iOS Firefox




<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




<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">

Positioning

#sometag{ !

position: static; !

}

#sometag{ !

position: static; !

}

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



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

position: static;

#box{ position: absolute; top: 25px; left: 25px; }


25

25


25

25


25

25

#container{ position: relative; }


25

25

#container{ position: relative; }

HTML:

CSS:#container{

position: relative; } !#box{ position: absolute; }

<div id="container"> ! <div id="box"></div> !!</div>

Pop Quiz!

What type of positioning should the outer container be?

relative!

What type of positioning should the outer container be?

What type of positioning should content inside the container be, when you want to position it?

absolute!

What type of positioning should content inside the container be, when you want to position it?

z-index

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

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>

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>

Pop Quiz

Which element will display on top of the other?

#blue{ position: relative; z-‐index: 55;

}

#red{ position: absolute; z-‐index: 45;

}

#blue!


#blue{ position: relative; z-‐index: 55;

}

#red{ position: absolute; z-‐index: 45;

}


.bluebox{ position:static; z-‐index: 55;

}

#bluebox{ position: relative; z-‐index: 45;

}

#bluebox!


.bluebox{ position:static; z-‐index: 55;

}

#bluebox{ position: relative; z-‐index: 45;

}

Exercise

<div id="redbox" class="box"></div> <div id="bluebox" class="box"></div> <div id="greenbox" class="box"></div>

Exercise

.box{ width:300px; height:300px; border:1px solid black; }

Exercise

#bluebox{ !

background:blue; position: absolute; top: 50px; left:50px; !

}

Exercise

#redbox{ !

background: red; position: absolute; top: 150px; left: 150px; !

}

Exercise

#greenbox{ !

background: green; position: absolute; top: 225px; left: 225px; !

}

Date post:	02-Jul-2015
Category:	Education
Upload:	uc-berkeley-graduate-school-of-journalism
View:	674 times
Download:	2 times

Inline, Block and Positioning in CSS

Education