ISTA 230

ISTA 230 - Introduction to Web Design

The Box Model

HTML

HTML

Two types of elements:

HTML

HTML

Block elements

HTML

HTML

Inline elements

HTML

HTML

All elements are rectangles.

<body>
   <p>
      This is my <em>emphasized</em> content.
      <a href="more.html">Click here for more.</a>
   </p>
</body>
      
This is my emphasized content. Click here for more.

HTML

HTML

All elements are rectangles.

All HTML elements are rendered by the browser as rectangles. Block elements can be thought of as rectangles that, by default, stretch from one side of the screen to the other. Inline elements can be thought of as rectangles that are simply the size of their content.

<body>
   <p>
      This is my <em>emphasized</em> content.
      <a href="more.html">Click here for more.</a>
   </p>
</body>
      
This is my emphasized content. Click here for more.

CSS

CSS

Dimensions - Inline Elements

...
      This is my <em>emphasized</em> content.
      <a href="more.html">Click here for more.</a>
...
      
This is my emphasized content. Click here for more.

CSS

CSS

Dimensions - Block Elements

<body>
   <p>
      ...
   </p>
</body>
      
This is my emphasized content. Click here for more.

CSS

CSS

Dimensions - width Property

While block elements, by default, have a width that is all of the available horizontal space of the containing element, we can adjust this using the 'width' CSS property.

p { width:auto; } /* Default */

/*
 * When applied to block elements, 'auto' means take up all available
 * horizontal white space in the containing element.
 */
p { width:50%; } /* 50% of the parent element's width */
      
This is my emphasized content. Click here for more.

CSS

CSS

Units of measurement

A pixel can be thought of as the smallest single component of a digital image or representation. When a webpage is displayed, everything on the screen is displayed using a collection of pixels.

For example, an image of the Google logo looks like six letters, displayed in four different colors. However, when you zoom in closer, you'll find that each letter is made up of a collection of small squares. Each of those squares is a pixel.

Google Logo
Google Logo
Google Logo

CSS

CSS

Screen Resolutions

Google Logo

CSS

CSS

Screen Resolutions

Google Logo

CSS

CSS

Screen Resolutions

Google Logo

CSS

CSS

Screen Resolutions

Computer monitor

CSS

CSS

Screen Resolutions

Computer monitor

Screen resolution: 1024 × 768

Computer monitors (and mobile devices) all come in varying shapes, sizes, and capabilities. Smaller desktop monitors can display, on average, 1024 pixels horizontally and 768 pixels vertically. This is often referred to as the screen's resolution. When using pixels to specify width/height, it is important to consider that some screens might not display a set pixel size as well as others! For example, some mobile devices have a screen resolution of only 320 pixels wide and 480 pixels tall.

CSS

CSS

Screen Resolutions

Computer monitor

Screen resolution: 800 × 600

CSS

CSS

Screen Resolutions

Computer monitor

Screen resolution: 1920 × 1080

CSS

CSS

Screen Resolutions

Computer monitor

Screen resolution: 320 × 480

CSS

CSS

Dimensions - width Property

p { width:200px; } /* 200px exactly. */
      
This is my emphasized content. Click here for more.

CSS

CSS

Dimensions - width Property

a
{
   width:50%;
}
      
This is my emphasized content. Click here for more.

The above CSS property doesn't have any impact on the display of links. Remember: Inline elements do not have explicit height or width!

CSS

CSS

Dimensions - width Property

p { width:auto; }
p { width:50%; }
p { width:300px; }
/*
 * Width can have a keyword value, a
 * percentage value, or a pixel value.
 * 
 * Default Value: auto
 * Inherited: No
 *
 */

CSS

CSS

Dimensions - height Property

CSS

CSS

Dimensions - height Property

CSS

CSS

Dimensions - height Property - Percentage Values

<body>
   <div>
      <img src="file.jpg" alt="My Image" />
   </div>
</body>
img  { height: 50%;  }



CSS

CSS

Dimensions - height Property - Percentages

<body>
   <div>
      <img src="file.jpg" alt="My Image" />
   </div>
</body>
img  { height: 50%;  } /* Does nothing...*/



The above CSS property doesn't have any impact on the display of the image because the containing element (<div>) has a 'height' value of 'auto' (the default set by the browser).

CSS

CSS

Dimensions - height Property - Percentages

<body>
   <div>
      <img src="file.jpg" alt="My Image" />
   </div>
</body>
img  { height: 50%;  } /* Does nothing...*/
div  { height: 100%; } /* Does nothing...*/


The above CSS property doesn't have any impact on the display of the image or the div because the containing element of the div (<body>) has a 'height' value of 'auto' (the default set by the browser).

CSS

CSS

Dimensions - height Property - Percentages

<body>
   <div>
      <img src="file.jpg" alt="My Image" />
   </div>
</body>
img  { height: 50%;  } /* Does nothing...*/
div  { height: 100%; } /* Does nothing...*/
body { height: 100%; } /* Does nothing! */

The above CSS property doesn't have any impact on the display of the image or the div or the body because the containing element of the body (<html>) has a 'height' value of 'auto' (the default set by the browser).

CSS

CSS

Dimensions - height Property - Percentages

<body>
   <div>
      <img src="file.jpg" alt="My Image" />
   </div>
</body>
img  { height: 50%;  } /* And now it works! */
div  { height: 100%; }
body { height: 100%; }
html { height: 100%; }

In order to use a percentage value for the height property, the containing element must have a non-auto value. If all containing elements use percentages, then you must specify the height for all elements including the <html> element. This is one of those weird quirks that you simply need to remember if you're using only percentage values for 'height'. That said, you should rarely, if ever, need to do so.

CSS

CSS

Dimensions - height Property - Percentages

<body>
   <div>
      <img src="file.jpg" alt="My Image" />
   </div>
</body>
img  { height: 50%;  } /* And now it does nothing again! */
div  { height: 100%; }

html { height: 100%; }

It should be noted that if any containing element doesn't have a non-auto height value set, then using percentages won't work, even if you've set the height for the <html> element.

CSS

CSS

Dimensions - height Property - Pixel Values

p
{
   height:200px;

}

CSS

CSS

Dimensions - height Property - Pixel Values

p
{
   height:200px;

}

This paragraph is 200px tall!

You can use pixel values to specify the height of an element. The height of the element will be exactly the value specified, regardless of the content within it.

CSS

CSS

Dimensions - height Property - Pixel Values

p
{
   height:200px;

}

In west Philadelphia born and raised On the playground was where I spent most of my days Chillin' out maxin' relaxin' all cool And all shootin some b-ball outside of the school When a couple of guys who were up to no good Started making trouble in my neighborhood I got in one little fight and my mom got scared She said 'You're movin' with your auntie and uncle in Bel Air' I begged and pleaded with her day after day But she packed my suit case and sent me on my way She gave me a kiss and then she gave me my ticket. I put my Walkman on and said, 'I might as well kick it'. First class, yo this is bad Drinking orange juice out of a champagne glass. Is this what the people of Bel-Air living like? Hmmmmm this might be alright. But wait I hear they're prissy, bourgeois, all that Is this the type of place that they just send this cool cat? I don't think so I'll see when I get there I hope they're prepared for the prince of Bel-Air Well, the plane landed and when I came out There was a dude who looked like a cop standing there with my name out I ain't trying to get arrested yet I just got here I sprang with the quickness like lightning, disappeared I whistled for a cab and when it came near The license plate said fresh and it had dice in the mirror If anything I could say that this cab was rare But I thought 'Nah, forget it' - 'Yo, homes to Bel Air' I pulled up to the house about 7 or 8 And I yelled to the cabbie 'Yo homes smell ya later' I looked at my kingdom I was finally there To sit on my throne as the Prince of Bel Air!

If your content requires a greater amount of space than what you've provided in the CSS, it will overflow the boundaries of the element but will not change the size of the element.

CSS

CSS

Dimensions - overflow Property

p
{
   height:200px;
   overflow: visible; /* Default value */
}

In west Philadelphia born and raised On the playground was where I spent most of my days Chillin' out maxin' relaxin' all cool And all shootin some b-ball outside of the school When a couple of guys who were up to no good Started making trouble in my neighborhood I got in one little fight and my mom got scared She said 'You're movin' with your auntie and uncle in Bel Air' I begged and pleaded with her day after day But she packed my suit case and sent me on my way She gave me a kiss and then she gave me my ticket. I put my Walkman on and said, 'I might as well kick it'. First class, yo this is bad Drinking orange juice out of a champagne glass. Is this what the people of Bel-Air living like? Hmmmmm this might be alright. But wait I hear they're prissy, bourgeois, all that Is this the type of place that they just send this cool cat? I don't think so I'll see when I get there I hope they're prepared for the prince of Bel-Air Well, the plane landed and when I came out There was a dude who looked like a cop standing there with my name out I ain't trying to get arrested yet I just got here I sprang with the quickness like lightning, disappeared I whistled for a cab and when it came near The license plate said fresh and it had dice in the mirror If anything I could say that this cab was rare But I thought 'Nah, forget it' - 'Yo, homes to Bel Air' I pulled up to the house about 7 or 8 And I yelled to the cabbie 'Yo homes smell ya later' I looked at my kingdom I was finally there To sit on my throne as the Prince of Bel Air!

Using the CSS property 'overflow', we can tell the browser what it should do when the contents of an element overflow its boundaries. By default, the browser will make content visible, even if it overflows the boundaries of its containing element.

CSS

CSS

Dimensions - overflow Property

p
{
   height:200px;
   overflow: hidden;
}

In west Philadelphia born and raised On the playground was where I spent most of my days Chillin' out maxin' relaxin' all cool And all shootin some b-ball outside of the school When a couple of guys who were up to no good Started making trouble in my neighborhood I got in one little fight and my mom got scared She said 'You're movin' with your auntie and uncle in Bel Air' I begged and pleaded with her day after day But she packed my suit case and sent me on my way She gave me a kiss and then she gave me my ticket. I put my Walkman on and said, 'I might as well kick it'. First class, yo this is bad Drinking orange juice out of a champagne glass. Is this what the people of Bel-Air living like? Hmmmmm this might be alright. But wait I hear they're prissy, bourgeois, all that Is this the type of place that they just send this cool cat? I don't think so I'll see when I get there I hope they're prepared for the prince of Bel-Air Well, the plane landed and when I came out There was a dude who looked like a cop standing there with my name out I ain't trying to get arrested yet I just got here I sprang with the quickness like lightning, disappeared I whistled for a cab and when it came near The license plate said fresh and it had dice in the mirror If anything I could say that this cab was rare But I thought 'Nah, forget it' - 'Yo, homes to Bel Air' I pulled up to the house about 7 or 8 And I yelled to the cabbie 'Yo homes smell ya later' I looked at my kingdom I was finally there To sit on my throne as the Prince of Bel Air!

We can also specify that the browser should hide the content that overflows the boundaries of its containing element.

CSS

CSS

Dimensions - overflow Property

p
{
   height:200px;
   overflow: auto;
}

In west Philadelphia born and raised On the playground was where I spent most of my days Chillin' out maxin' relaxin' all cool And all shootin some b-ball outside of the school When a couple of guys who were up to no good Started making trouble in my neighborhood I got in one little fight and my mom got scared She said 'You're movin' with your auntie and uncle in Bel Air' I begged and pleaded with her day after day But she packed my suit case and sent me on my way She gave me a kiss and then she gave me my ticket. I put my Walkman on and said, 'I might as well kick it'. First class, yo this is bad Drinking orange juice out of a champagne glass. Is this what the people of Bel-Air living like? Hmmmmm this might be alright. But wait I hear they're prissy, bourgeois, all that Is this the type of place that they just send this cool cat? I don't think so I'll see when I get there I hope they're prepared for the prince of Bel-Air Well, the plane landed and when I came out There was a dude who looked like a cop standing there with my name out I ain't trying to get arrested yet I just got here I sprang with the quickness like lightning, disappeared I whistled for a cab and when it came near The license plate said fresh and it had dice in the mirror If anything I could say that this cab was rare But I thought 'Nah, forget it' - 'Yo, homes to Bel Air' I pulled up to the house about 7 or 8 And I yelled to the cabbie 'Yo homes smell ya later' I looked at my kingdom I was finally there To sit on my throne as the Prince of Bel Air!

Using 'auto' as the value for the 'overflow' property, we can specify that the browser should display all content normally, unless if over overflows the boundaries of its containing element, in which case it should add the appropriate scroll bar(s).

CSS

CSS

Dimensions - overflow Property

p
{
   height:200px;
   overflow: scroll;
}

In west Philadelphia born and raised On the playground was where I spent most of my days Chillin' out maxin' relaxin' all cool And all shootin some b-ball outside of the school When a couple of guys who were up to no good Started making trouble in my neighborhood I got in one little fight and my mom got scared She said 'You're movin' with your auntie and uncle in Bel Air' I begged and pleaded with her day after day But she packed my suit case and sent me on my way She gave me a kiss and then she gave me my ticket. I put my Walkman on and said, 'I might as well kick it'. First class, yo this is bad Drinking orange juice out of a champagne glass. Is this what the people of Bel-Air living like? Hmmmmm this might be alright. But wait I hear they're prissy, bourgeois, all that Is this the type of place that they just send this cool cat? I don't think so I'll see when I get there I hope they're prepared for the prince of Bel-Air Well, the plane landed and when I came out There was a dude who looked like a cop standing there with my name out I ain't trying to get arrested yet I just got here I sprang with the quickness like lightning, disappeared I whistled for a cab and when it came near The license plate said fresh and it had dice in the mirror If anything I could say that this cab was rare But I thought 'Nah, forget it' - 'Yo, homes to Bel Air' I pulled up to the house about 7 or 8 And I yelled to the cabbie 'Yo homes smell ya later' I looked at my kingdom I was finally there To sit on my throne as the Prince of Bel Air!

CSS

CSS

Dimensions - overflow Property

p
{
   height:200px;
   overflow: scroll;
}

This paragraph is 200px tall!

We can also specify 'scroll' as the value for the 'overflow' property, which will add both vertical and horizontal scroll bars to the element, regardless of whether the content overflows its boundaries.

CSS

CSS

Dimensions - height Property

p { height: auto; }
p { height: 50%; }
p { height: 300px; }
/*
 * Height can have a keyword value, a
 * percentage value, or a pixel value.
 * Remember, percentage only works
 * if the containing element has a
 * non-auto value.
 * 
 * Default Value: auto
 * Inherited: No
 *
 */

CSS

CSS

Dimensions - overflow Property

p { overflow: visible; }
p { overflow: hidden; }
p { overflow: scroll; }
p { overflow: auto; }
/*
 * Overflow is used to dictate what happens if
 * the dimensions of an element are too small for
 * its content.
 * 
 * Default Value: visible
 * Inherited: No
 *
 */

CSS

CSS

Dimensions - More than meets the eye...

 
 
 
Content

CSS

CSS

Dimensions - The Box Model

Margin
Border
Padding
Content

Element dimensions are actually more complicated than simply width and height. The true dimensions of an element are found by combining the size of the content area, the amount of 'padding', the size of the element border, and the margins of the element.

The CSS 'width' and 'height' properties set the dimensions of the content area only.

CSS

CSS

Dimensions - The Box Model

/*** 50% of the parent element's width ***/
p { width:50%; }
Margin
Border
Padding
50%

For example, when we say that a paragraph has a width of 50%, we are actually setting the width of the content area.

CSS

CSS

Box Model - Padding

Padding allows us to provide white space between the content of an element and its border.

Margin
Border
Padding
This is my content.

CSS

CSS

Box Model - padding Property

We can set the padding of an element using individual properties for each side of the element...

/*** Padding is 1% of the containing element's width  ***/
p
{
   padding-top:1%;
   padding-right:1%;
   padding-bottom:1%;
   padding-left:1%;
}
   

CSS

CSS

Box Model - padding Property - Shorthand

Alternatively, we can use the 'padding' property to specify a padding value for all sides of the element at once...





p
{
   padding: top right bottom left;
}
   

It is worth noting that the pattern 'top right bottom left' is a common one for a number of CSS properties and is worth memorizing.

CSS

CSS

Box Model - padding Property - Shorthand

/* Padding is 1% of the containing element's width on
 * the top & bottom and 2% of the containing element's
 * width on the left & right.
 */
p
{
   padding: 1% 2% 1% 2%;
}
   

CSS

CSS

Box Model - padding Property - More Shorthand

We can also use shorthand notation with the 'padding' property if the top and bottom padding value is the same and the left and right padding value is the same...





p
{
   padding:top/bottom right/left;
}
   

CSS

CSS

Box Model - padding Property - More Shorthand


/*** Top and bottom padding is 0% of the containing element's width  ***/
/*** Left and right padding is 2% of the containing element's width  ***/

p
{
   padding: 0% 2%;
}
   

It is worth noting that the pattern 'top/bottom left/right' is a common one for a number of CSS properties and is worth memorizing.

CSS

CSS

Box Model - padding Property - More Shorthand

Lastly, if all sides have the same padding value, we can use the 'padding' property to specify a single value for all of them...





p
{
   padding:top/right/bottom/left;
}
   

CSS

CSS

Box Model - padding Property - More Shorthand



/*** Padding is 1% of the containing element's width on every side ***/

p
{
   padding: 1%;
}
   

CSS

CSS

Box Model - padding Property

p
{
   padding:1%;

}
   
Margin
Border
Padding
This is my content.

CSS

CSS

Box Model - padding Property

p
{
   padding:1%;
   background-color:#00f;
}
   
Margin
Border
Padding
This is my content.

CSS

CSS

Box Model - padding Property

p { padding: 50%; }
p { padding: 10px; }
/*
 * Padding is used to provide white space
 * between an elements content an its border.
 * It can have a specific value or a percentage.
 * Percentage refers to the width of the containing element.
 * 
 * Note: Inline elements are not impacted by
 * top or bottom padding!
 * 
 * Default Value: 0
 * Inherited: No
 *
 */

CSS

CSS

Box Model - border Properties

Margin
Border
Padding
This is my content.

Borders are displayed between the margin and the padding of an element. A border is made up of three properties:

CSS

CSS

Box Model - border-width Property

We can set the border width of an element using individual properties for each side of the element...


/*** Border is 1 pixel wide ***/
p
{
   border-top-width:1px;
   border-right-width:1px;
   border-bottom-width:1px;
   border-left-width:1px;
}
   

CSS

CSS

Box Model - border-width Property - Shorthand

Alternatively, we can use the 'border-width' property to specify a border-width value for all sides of the element at once...



p
{
   border-width:top right bottom left;
}
   

CSS

CSS

Box Model - border-width Property - Shorthand


/*** Border is 1 pixel wide ***/
p
{
   border-width:1px 1px 1px 1px;
}
   

CSS

CSS

Box Model - border-width Property - - More Shorthand

We can also use shorthand notation with the 'border-width' property if the top and bottom border-width value is the same and the left and right border-width value is the same...



p
{
   border-width:top/bottom right/left;
}
   

CSS

CSS

Box Model - border-width Property - Shorthand

/*** Top and bottom borders are 2 pixels wide ***/
/*** Left and right borders are 0 pixels wide ***/
p
{
   border-width:2px 0;
}
   

CSS

CSS

Box Model - border-width Property - - More Shorthand

Lastly, if all sides have the same border-width value, we can use the 'border-width' property to specify a single value for all of them...



p
{
   border-width:top/right/bottom/left;
}
   

CSS

CSS

Box Model - border-width Property - - More Shorthand


/*** All borders are 2 pixels wide ***/
p
{
   border-width:2px;
}
   

CSS

CSS

Box Model - border-color Property

Border colors can be set using any of the color value options we've discussed in this course (CSS keyword, rgb values, or hexidecimal notation).

We can set the border color of an element using individual properties for each side of the element...


/*** Border is red ***/
p
{
   border-top-color:#f00;
   border-right-color:#f00;
   border-bottom-color:#f00;
   border-left-color:#f00;
}
   

CSS

CSS

Box Model - border-color Property - Shorthand

Alternatively, we can use the 'border-color' property to specify a border-color value for all sides of the element at once...



p
{
   border-color:top right bottom left;
}
   

CSS

CSS

Box Model - border-color Property - Shorthand


/*** Border is red, white, blue, and green***/
p
{
   border-color:#f00 #fff #00f #0f0;
}
   

CSS

CSS

Box Model - border-color Property - More Shorthand

We can also use shorthand notation with the 'border-color' property if the top and bottom border-color value is the same and the left and right border-color value is the same...



p
{
   border-color:top/bottom right/left;
}
   

CSS

CSS

Box Model - border-color Property - Shorthand

/*** Top and bottom borders are blue ***/
/*** Left and right borders are red ***/
p
{
   border-color:#00f #f00;
}
   

CSS

CSS

Box Model - border-color Property - More Shorthand

Lastly, if all sides have the same border-color value, we can use the 'border-color' property to specify a single value for all of them...



p
{
   border-color:top/right/bottom/left;
}
   

CSS

CSS

Box Model - border-color Property - More Shorthand


/*** All borders are yellow ***/
p
{
   border-color:#ff0;
}
   

CSS

CSS

Box Model - border-style Property

CSS provides us with eight different styles of borders to choose from:

solid
dashed
dotted
double
inset
groove
outset
ridge

The border style can be set using any of the above styles as the value of the border-style CSS property.

CSS

CSS

Box Model - border-style Property

We can set the border style of an element using individual properties for each side of the element...


/*** Border is solid ***/
p
{
   border-top-style:solid;
   border-right-style:solid;
   border-bottom-style:solid;
   border-left-style:solid;
}
   

CSS

CSS

Box Model - border-style Property - Shorthand

Alternatively, we can use the 'border-style' property to specify a border-style value for all sides of the element at once...



p
{
   border-style:top right bottom left;
}
   

CSS

CSS

Box Model - border-style Property - Shorthand


/*** Border is solid and dotted***/
p
{
   border-style:solid dotted solid dotted;
}
   

CSS

CSS

Box Model - border-style Property - More Shorthand

We can also use shorthand notation with the 'border-style' property if the top and bottom border-style value is the same and the left and right border-style value is the same...



p
{
   border-style:top/bottom right/left;
}
   

CSS

CSS

Box Model - border-style Property - More Shorthand

/*** Top and bottom borders are solid ***/
/*** Left and right borders are dashed ***/
p
{
   border-style:solid dashed;
}
   

CSS

CSS

Box Model - border-style Property - More Shorthand

Lastly, if all sides have the same border-style value, we can use the 'border-style' property to specify a single value for all of them...



p
{
   border-style:top/right/bottom/left;
}
   

CSS

CSS

Box Model - border-style Property - More Shorthand


/*** All borders are inset ***/
p
{
   border-style:inset;
}
   

CSS

CSS

Dimensions - border-width Property

p { border-width: 3px; }
/*
 * Border width can be specified in pixels
 * or using the keywords 'thin', 'medium', or
 * 'thick'. Pixels is more consistent across
 * browsers. Percentages are NOT allowed.
 * 
 * Default Value: medium
 * Inherited: No
 *
 */

CSS

CSS

Dimensions - border-style Property

p { border-style: solid; }
/*
 * Border style can be specified as any valid
 * border style keyword. Options are 'solid',
 * 'dashed', 'dotted', 'double', 'inset',
 * 'groove', 'outset', 'ridge', or 'none'.
 * 
 * Default Value: N/A
 * Inherited: No
 *
 */

CSS

CSS

Dimensions - border-color Property

p { border-color: #f00; }
/*
 * Border color can be specified as any valid
 * CSS color keyword, an rgb value, or as a
 * hexidecimal color value.
 * 
 * Default Value: N/A
 * Inherited: No
 *
 */

CSS

CSS

Box Model - border Property - Super-duper Shorthand

Because typing all three border properties can be somewhat tedious, we also have the option of using the 'border' property to specify all three border properties in one line:



p
{
   border: width style color;
}
   

CSS

CSS

Box Model - border Property - Super-duper Shorthand


/*** All borders are 3px wide, solid, and red.  ***/
p
{
   border:3px solid #f00;
}
   

CSS

CSS

Box Model - border Property

p
{
   padding:1%;
   background-color:#00f;

}
   
Margin
Border
Padding
This is my content.

CSS

CSS

Box Model - border Property

p
{
   padding:1%;
   background-color:#00f;
   border:5px dashed #333;
}
   
Margin
Border
Padding
This is my content.

It is worth noting that the background color is visible through the padding and borders of an element but is not applied to the margins of an element.

CSS

CSS

Box Model - margin Property

Allows us to provide white space around an element outside of its border.

Margin
Border
Padding
This is my content.

CSS

CSS

Box Model - margin Property

We can set the margins of an element using individual properties for each side of the element...


/*** Margin is 1% of the containing element's width  ***/
p
{
   margin-top:1%;
   margin-right:1%;
   margin-bottom:1%;
   margin-left:1%;
}
   

CSS

CSS

Box Model - margin Property - Shorthand

Alternatively, we can use the 'margin' property to specify a margin value for all sides of the element at once...



p
{
   margin: top right bottom left;
}
   

CSS

CSS

Box Model - margin Property - Shorthand


/*** Margin is 1% of the containing element's width  ***/
p
{
   margin: 1% 1% 1% 1%;
}
   

CSS

CSS

Box Model - margin Property - More Shorthand

We can also use shorthand notation with the 'margin' property if the top and bottom margin value is the same and the left and right margin value is the same...



p
{
   margin:top/bottom right/left;
}
   

CSS

CSS

Box Model - margin Property - More Shorthand

/*** Top and bottom margin is 0% of the containing element's width  ***/
/*** Left and right margin is 2% of the containing element's width  ***/
p
{
   margin: 0% 2%;
}
   

CSS

CSS

Box Model - margin Property - More Shorthand

Lastly, if all sides have the same margin value, we can use the 'margin' property to specify a single value for all of them...



p
{
   margin:top/right/bottom/left;
}
   

CSS

CSS

Box Model - margin Property - More Shorthand


/*** Margin is 1% of the containing element's width on every side ***/
p
{
   margin: 1%;
}
   

CSS

CSS

Box Model - Margins and Backgrounds



p
{
   margin:1%;

}
   
Margin
Border
Padding
This is my content.

CSS

CSS

Box Model - Margins and Backgrounds



p
{
   margin:1%;
   background-color:#00f;
}
   
Margin
Border
Padding
This is my content.

It is worth noting that the margins of an element will not show the background color of the element. Instead, they are transparent and will display the background of the containing element (in most cases).

CSS

CSS

Box Model - Auto Margins

<body>
   <p>
      This is my content.
   </p>
</body>

      
      
This is my content.

As with 'width', an 'auto' value for left or right margins means take up all available horizontal white space in the containing element when applied to block elements.

CSS

CSS

Box Model - Auto Margins

p
{
   width: 50%;


}
      
      
This is my content.

CSS

CSS

Box Model - Auto Margins

p
{
   width: 50%;
   margin-left:  auto;
   margin-right: auto;
}
      
      
This is my content.

We can use 'auto' for left and right margins to center an element that has a width less than 100%.

CSS

CSS

Box Model - margin Property

p { margin: 5%; }
p { margin: 10px; }
p { margin: 0 auto; }
/*
 * Margin is used to provide white space
 * around an elements outside of its border.
 * It can have a specific value, a percentage,
 * or the keyword auto.
 * Percentage refers to the width of the containing element.
 * 
 * Note: Inline elements are not impacted by
 * top or bottom margins!
 * 
 * Default Value: 0
 * Inherited: No
 *
 */

CSS

CSS

Box Model - Block Elements

CSS

CSS

Box Model - Inline Elements

HTML

HTML

Inline elements

   <p>
      This is <em>an example of some emphasized text</em>.
   </p>
         
         This is an example of some emphasized text.
         
      

HTML

HTML

Inline elements

   <p>
      This is <em>an example of some emphasized text</em>.
   </p>
         
            This is an example of
some italic text
.

Inline elements can often span multiple lines, as can be seen with the <em> tags above. The element is highlighted with a dotted line.

CSS

CSS

Inline elements

   <p>
      This is <em>an example of some emphasized text</em>.
   </p>
em
{
   padding: 0 30px;
}
         
            This is an example of
some italic text
.

When adding padding to the left and right of the <em> element, the padding is applied to the left side of the element (on the first line) and the right side of the element (on the second line) but has no impact on the element where the line break occurs.

Thus, applying padding to inline elements can have a less than desirable impact on the display of our content. When adding padding or margins to inline elements, it is recommended to do so hesitantly and in small amounts.

CSS

CSS

Box Model - Collapsing Margins

<body>
   <p> This is my content. </p>
   <p> This is more content. </p>
</body>

      
p
{
   margin: 1%;
}
      

When two elements are displayed one on top of the other, they don't both impact the value of the margin between them. In the example above, there are two paragraph tags in the HTML code. According to the CSS rules provided, paragraphs should have a 1% margin on every side.

However, when they are displayed, the larger of the two margins will be used while the other is ignored. In the instance that they are the same, only one of them will be applied.

CSS

CSS

Box Model - Collapsing Margins

Paragraph - 1% margin
1% margin
Paragraph - 1% margin

CSS

CSS

Box Model - Collapsing Margins

Paragraph - 1% margin
1% margin
Paragraph - 1% margin

Both paragraphs have a 1% margin. However, the browser only uses one of them to specify the margin between them.

CSS

CSS

Box Model - Collapsing Margins

margin-bottom: 1%;

CSS

CSS

Box Model - Collapsing Margins

margin-bottom: 1%;
Now a 2% margin
margin-top: 2%;

CSS

CSS

Box Model - Collapsing Margins

margin-bottom: 1%;
2% margin
margin-top: 2%;

The top paragraph has a margin of 1% but the bottom paragraph has a margin of 2%. The browser will disregard the 1% margin and make the margin between the paragraphs 2%.

CSS

CSS

Box Model - Collapsing Margins

When two vertical (i.e., top and bottom) margins push up against each other, the larger of the two remains in place and the other is collapsed to 0.

CSS

CSS

Box Model - Collapsing Margins

margin-bottom: 5%;
5% margin
margin-top: 3%;

CSS

CSS

Box Model - Collapsing Margins

margin-bottom: 5%;
5% margin
margin-top: 3%;

CSS

CSS

Box Model - Negative Margins

Margins can take positive or negative values.

p
{
   margin-top: -3%;
}
   

Margins can be specified as negative values. This is not something that you'll need to use very often! That said, it's good to know how it works in case you come across it in someone else's code or find that you have no alternatives.

When applied to a top or left margin, a negative value will move the element in the specified direction by that value. For example, a -20px top margin will shift the element up on the screen by 20px, potentially overlapping other HTML elements.

When applied to a bottom or right margin, a negative value will move all following HTML elements in the specified direction by that value. For example, a -20px bottom margin will shift the next HTML element up on the screen by 20px, potentially overlapping HTML elements with the -20px bottom margin.

When thinking about collapsing margins and negative values, it is important to remember that when two vertical (i.e., top and bottom) margins push up against each other, if one (or both) of them is negative, then the values will be added together and the margin will be the result.

CSS

CSS

Box Model - Negative Margins

Top & left negative margins move the element in the specified direction.

margin-top:0;
margin-top:0;
margin-top:0;

CSS

CSS

Box Model - Negative Margins

Top & left negative margins move the element in the specified direction.

margin-top:0;
margin-top:-20px;
margin-top:0;

CSS

CSS

Box Model - Negative Margins

Top & left negative margins move the element in the specified direction.

margin-top:0;
margin-top:-50px;
margin-top:0;

CSS

CSS

Box Model - Negative Margins

Bottom & right negative margins pulls any succeeding elements into the element, overlapping it.

margin-bottom:0;
margin-bottom:0;
margin-bottom:0;

CSS

CSS

Box Model - Negative Margins

Bottom & right negative margins pulls any succeeding elements into the element, overlapping it.

margin-bottom:0;
margin-bottom:-20px;
margin-bottom:0;

CSS

CSS

Box Model - Negative Margins

Bottom & right negative margins pulls any succeeding elements into the element, overlapping it.

margin-bottom:0;
margin-bottom:-50px;
margin-bottom:0;

CSS

CSS

Box Model - Negative Collapsing Margins

When two vertical (i.e., top and bottom) margins push up against each other, if one (or both) of them is negative, then the values will be added together and the margin will be the result.

CSS

CSS

Box Model - Negative Collapsing Margins

margin-bottom: 3%;
margin-top: -1%;

CSS

CSS

Box Model - Negative Collapsing Margins

margin-bottom: 3%;
3% + -1% = 2% margin
margin-top: -1%;

CSS

CSS

Box Model - Negative Collapsing Margins

margin-bottom: 3%;
margin-top: -3%;

CSS

CSS

Box Model - Negative Collapsing Margins

margin-bottom: 3%;
margin-top: -4%;

CSS

CSS

Box Model - Body Margins/Padding

      <body>
         <h1>Page Title</h1>
      </body>
   

CSS

CSS

Box Model - Body Margins/Padding

Page Title

CSS

CSS

Box Model - Body Margins/Padding

      <body>
         <h1>Page Title</h1>
      </body>
   
      h1
      {
         color:#fff;
         background-color:#000;

      }
   

CSS

CSS

Box Model - Body Margins/Padding

Page Title

CSS

CSS

Box Model - Body Margins/Padding

      <body>
         <h1>Page Title</h1>
      </body>
   
      h1
      {
         color:#fff;
         background-color:#000;

      }
   

CSS

CSS

Box Model - Body Margins/Padding

      <body>
         <h1>Page Title</h1>
      </body>
   
      h1
      {
         color:#fff;
         background-color:#000;
         margin:0;
      }
   

CSS

CSS

Box Model - Body Margins/Padding

Page Title

   <body>
      <h1>Page Title</h1>
   </body>

The <body> element is a little different than other elements when it comes to margins and padding. In the page above, if we wanted to remove all white space from around the page heading, we would need to do to things:

  1. Remove the margins from around the page heading
  2. Remove the padding AND margins from the body element

The fact that you must reset both the padding and the margins of the body elements is simply a weird quirk of modern browsers. It is also worth noting that the <body> element is the exception to the rule in that background colors will show through the margins.

CSS

CSS

Box Model - Body Margins/Padding

      <body>
         <h1>Page Title</h1>
      </body>
   
      body
      {
         padding:0;

      }
   

CSS

CSS

Box Model - Body Margins/Padding

Page Title

CSS

CSS

Box Model - Body Margins/Padding

      <body>
         <h1>Page Title</h1>
      </body>
   
      body
      {
         padding:0;
         background-color:#ccc;
      }
   

CSS

CSS

Box Model - Body Margins/Padding

Page Title

CSS

CSS

Box Model - Body Margins/Padding

      <body>
         <h1>Page Title</h1>
      </body>
   
      body
      {
         padding:0; // Only works in the Opera browser

      }
   

CSS

CSS

Box Model - Body Margins/Padding

      <body>
         <h1>Page Title</h1>
      </body>
   
      body
      {
         padding:0; // Only works in the Opera browser
         margin: 0; // Works in all other modern browsers
      }
   

CSS

CSS

Box Model - Body Margins/Padding

Page Title

CSS

CSS

Document Flow - Two Column Layout

   <body>
      <div>
         <h1>My Page</h1>
         <p>Some content</p>
         <p>Some more content</p>
      </div>
   </body>
My Page
Some content
Some more content

CSS

CSS

Document Flow - Two Column Layout

   <body>
      <div>
         <h1>My Page</h1>
         <p>Some content</p>
         <p>Some more content</p>
      </div>
   </body>
h1, p
{
   width: 50%;
}
p+p { margin left: 50%;}
My Page
Some content
Some more content

We've seen that we can adjust the width of a block element. However, we haven't seen any instances where we've made to block elements display side by side. This is because, by default, block elements are preceded and followed by line breaks.

If we wanted to have a true two-column layout, we'd need to figure out a way to make a given element (or set of elements) float to one side while the other elements wrapped around the other side...

CSS

CSS

float

div
{
   float: value;
}

CSS

CSS

Playing with blocks

<div>
   <img src="myImage.png" alt="My image" />
   <p>Above is an image I drew. I wish it didn't leave so much white space to the ...</p>
</div>
         My image
         

Above is an image I drew. I wish I didn't have so much white space to the right of it...

Consider the above scenario. We have an image that is displaying on a line all by itself. We'd like to be able to have our text on the right side of it so it doesn't have so much white space around it.

CSS

CSS

float

<div>
   <img src="myImage.png" alt="My image" />
   <p>Above is an image I drew. I wish it didn't leave so much white space to the ...</p>
</div>
img { float:left; }

Using CSS, we can tell the browser to make the image 'float' to the left. All following content will flow around the image.

CSS

CSS

float

<div>
   <img src="myImage.png" alt="My image" />
   <p>Above is an image I drew. I wish it didn't leave so much white space to the ...</p>
</div>
img { float:left; }
         My image
         

Above is an image I drew. I wish I didn't have so much white space to the right of it...


Now the image is displayed on the left and the paragraph automatically wraps around to the right of the image. However, if we had more text in our paragraph, what would happen when it reached the end of the image?

CSS

CSS

float

<div>
   <img src="myImage.png" alt="My image" />
   <p>Above is an image I drew. I wish it didn't leave so much white space to the ...</p>
</div>
img { float:left; }
         My image
         

Above is an image I drew. I wish I didn't have so much white space to the right of it...


CSS

CSS

float

<div>
   <img src="myImage.png" alt="My image" />
   <p>Above is an image I drew. I wish it didn't leave so much white space to the ...</p>
</div>
img { float:left; }
         My image
         

Above is an image I drew. I wish I didn't have so much white space to the right of it...


CSS

CSS

float

<div>
   <img src="myImage.png" alt="My image" />
   <p>Above is an image I drew. I wish it didn't leave so much white space to the ...</p>
</div>
img { float:right; }
         My image
         

Above is an image I drew. I wish I didn't have so much white space to the right of it...


CSS

CSS

float

<div>
   <img src="myImage.png" alt="My image" />
   <p>To the left is an image I drew. I'm so glad... </p>
</div>
img { float:left; }

         My image
         

To the left is an image I drew. I'm so glad that my text now wraps around this image and I'm not wasting so much of my valuable screen space! Floating images is great for creating a strong website that combines text and images. Though they may be challenging to grasp at first, floated elements are a critical part of modern web design.

As you can see, the text wraps underneath the bottom edge of the image. In some cases, this may be the desired look. In other cases, you may want to have a more columnar look and feel. How can we make it so that the paragraph doesn't wrap underneath the image?

CSS

CSS

float

<div>
   <img src="myImage.png" alt="My image" />
   <p>To the left is an image I drew. I'm so glad... </p>
</div>
img { float:left; }

         My image
         

To the left is an image I drew. I'm so glad that my text now wraps around this image and I'm not wasting so much of my valuable screen space! Floating images is great for creating a strong website that combines text and images. Though they may be challenging to grasp at first, floated elements are a critical part of modern web design.

CSS

CSS

float

<div>
   <img src="myImage.png" alt="My image" />
   <p>To the left is an image I drew. I'm so glad... </p>
</div>
img { float:left; }

         My image
         

To the left is an image I drew. I'm so glad that my text now wraps around this image and I'm not wasting so much of my valuable screen space! Floating images is great for creating a strong website that combines text and images. Though they may be challenging to grasp at first, floated elements are a critical part of modern web design.

CSS

CSS

float

<div>
   <img src="myImage.png" alt="My image" />
   <p>To the left is an image I drew. I'm so glad... </p>
</div>
img { float:left; }
p { margin-left: 80px;}
         My image
         

To the left is an image I drew. I'm so glad that my text now wraps around this image and I'm not wasting so much of my valuable screen space! Floating images is great for creating a strong website that combines text and images. Though they may be challenging to grasp at first, floated elements are a critical part of modern web design.

We know that the image is 75px wide. By giving the paragraph a left margin of 80px, we ensure that the text won't flow underneath the image, even if there's lots of text in the paragraph.

CSS

CSS

float

<div>
   <p class="column1">Column 1 content</p>
   <p class="column2">Column 2 content</p>
</div>
         

Column 1 content

Column 2 content

Imagine now that you want to do the same thing but instead of a 75px image, you want to make two columns using paragraph elements.

CSS

CSS

float

<div>
   <p class="column1">Column 1 content</p>
   <p class="column2">Column 2 content</p>
</div>
.column1 { float:left; }
         

Column 1 content

Column 2 content

You would start by floating one of the paragraph images. However, it would have no effect on the display of the page.

This wouldn't work because the width of column1 takes up the entire containing element.

CSS

CSS

float

<div>
   <p class="column1">Column 1 content</p>
   <p class="column2">Column 2 content</p>
</div>
.column1 { float:left; width:20%; }
         

Column 1 content

Column 2 content

If you adjusted the width of the floated element, you could achieve the desired results. However, we'd want to add some additional code to make sure that the columns stayed as columns...

CSS

CSS

float

<div>
   <p class="column1">Column 1 content</p>
   <p class="column2">Column 2 content</p>
</div>
.column1 { float:left; width:20%; }
         

Column 1 content

Column 2 content

CSS

CSS

float

<div>
   <p class="column1">Column 1 content</p>
   <p class="column2">Column 2 content. Lots more...</p>
</div>
.column1 { float:left; width:20%; }
         

Column 1 content

Column 2 content. Lots more content could go here and would wrap all around column 1. It would not stay to the right like I want it to...

CSS

CSS

float

<div>
   <p class="column1">Column 1 content</p>
   <p class="column2">Column 2 content. Lots more...</p>
</div>
.column1 { float:left; width:20%; }
.column2 { margin-left:20%; }
         

Column 1 content

Column 2 content. Lots more content could go here and now it will stay in this column alone, just like I want it to! Margins are the best ever!

By adding a margin to the left side of column 2, we make sure that its content doesn't wrap underneath column 1.

CSS

CSS

float Property

p { float: left; }
p { float: right; }
p { float: none; }
/*
 * Float is used to specify whether an element should
 * 'float' outside of the normal document flow. This
 * property can have a value of 'left', 'right', or
 * 'none'.
 * 
 * Default Value: auto
 * Inherited: No
 *
 */

CSS

CSS

float

<div>
   <p class="column1">Column 1 content just got bigger!</p>
   <p class="column2">Column 2 content.</p>
   <div id="footer">Copyright 2017</div>
</div>
.column1 { float:left; width:20%; }
.column2 { margin-left:20%; }
         

Column 1 content just got bigger!

Column 2 content.

Copyright 2017

Imagine that in addition to your two columns, you wanted to include a page footer with the copyright information. This footer should span the entire width of the page but it looks like it's part of column 2 instead...

CSS

CSS

float

<div>
   <p class="column1">Column 1 content just got bigger!</p>
   <p class="column2">Column 2 content.</p>
   <div id="footer">Copyright 2017</div>
</div>
.column1 { float:left; width:20%; }
.column2 { margin-left:20%; }
         

Column 1 content just got bigger!

Column 2 content.

Copyright 2017

CSS

CSS

clear

<div>
   <p class="column1">Column 1 content just got bigger!</p>
   <p class="column2">Column 2 content.</p>
   <div id="footer">Copyright 2017</div>
</div>
.column1 { float:left; width:20%; }
.column2 { margin-left:20%; }
#footer { clear:left; }
         

Column 1 content just got bigger!

Column 2 content.

Copyright 2017

In order to fix this, we would use the 'clear' property. 'clear' allows us to specify which side of the given element shouldn't have any floated elements touching it.

CSS

CSS

clear Property

p { clear: left; }
p { clear: right; }
p { clear: both; }
/*
 * Clear is used to specify where content is NOT
 * allowed to float. This property can have a value
 * of 'left', 'right', or 'both'.
 * 
 * Default Value: auto
 * Inherited: No
 *
 */

CSS

CSS

Floating Issues

CSS

CSS

Floating Issues

For example, consider the following HTML code...


<div>
   <img src="cats.jpg" alt="CATS!" />
   <p>This is a picture of some cats.</p>
</div>

      
Non-floated image
This is a picture of some cats.

CSS

CSS

Floating Issues

img
{
   float:left;


}
      
Floated image
This is a picture of some cats.

CSS

CSS

Floating Issues

When we float the image left, the height of the containing element (<div>) shrinks to the size of the un-floated content.

img
{
   float:left;


}
      
Floated image
This is a picture of some cats.

CSS

CSS

Floating Issues

If the div didn't have any content in it other than the image that we want to float left...

<div>
   <img src="cats.jpg" alt="CATS!" />
</div>



      
Non-floated image

CSS

CSS

Floating Issues

img
{
   float:left;


}
      
Floated image

CSS

CSS

Floating Issues

... the <div> would essentially disappear from the screen when the image was floated. This is because it no longer contains any non-floated elements and is displayed as an empty <div>.

img
{
   float:left;


}
      
Floated image

We need to figure out a way to keep the <div> from disappearing.

CSS

CSS

Floating Issues

<div>
   <img src="cats.jpg" alt="CATS!" />
   <br style="clear:both" />
</div>


      
Non-floated image

We could use a <br /> tag with its style set to 'clear:both'. While this would ensure that the containing element didn't disappear (and actually remained the correct height for ideal display), it violates our tenant that HTML is to be used for structure, organization, and meaning.

CSS

CSS

Floating Issues

<div>
   <img src="cats.jpg" alt="CATS!" />
   <br style="clear:both" /> <!-- Not great... -->
</div>


      
Non-floated image

CSS

CSS

Floating Issues

Fortunately, it turns out that setting an element's 'overflow' property to auto will have the same effect in most cases. This is the preferred method for addressing preventing containing elements from collapsing for now (we'll discuss other options later in the semester).

img { float:left; }

div { overflow:auto; }



      
Floated image
Applying 'overflow:auto' to the containing element will fix the float issue!

CSS

CSS

display

Up to this point, we've discussed block and inline elements in concrete terms. However, the 'display' property adds a new level of flexibility, allowing us to specify whether an element should display as a block element or as an inline element.

For example, if we wanted each of the links in the following HTML snippet to be on their own line, we could do it using HTML by adding a <br /> after each link. However, that would violate our tenant that HTML should be used for structure, organization, and meaning (not display). A better approach would be to change the 'display' property so that the <a> elements (inline elements by default) display as block elements.

<div>
   <a href="#">Link 1</a>
   <a href="#">Link 2</a>
   <a href="#">Link 3</a>
</div>

Link 1 Link 2 Link 3

CSS

CSS

display

<div>
   <a href="#">Link 1</a>
   <a href="#">Link 2</a>
   <a href="#">Link 3</a>
</div>
/** All hyperlinks now behave like block elements. **/
a{ display:block; }

Link 1
Link 2
Link 3

It should be noted that changing an element's 'display' property doesn't change the rules about how elements should be nested within your HTML code. Native inline elements still need to be contained within a native block element, even if it has been set to 'display:block'.

CSS

CSS

display Property

div { display: inline; }
a { display: block; }
/*
 * Display is used to specify whether an element should
 * act like a block or an inline element. For now, this
 * property can have a value of 'block', 'inline', or
 * 'none'.
 * 
 * Default Value: auto
 * Inherited: No
 *
 */