Chapter 14: Thinking Inside the Box

The Element Box

Content Area
Inner Edge
Padding
Border
Margin
Outer Edge

width, height, box-sizing

.bg_width-height-content {
  box-sizing: border-box;
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px dashed gray;
  margin: 20px;
  }

.bg_width-height-content {
  background-color: silver;
  box-sizing: content-box;
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px dashed gray;
  margin: 20px;
  }

overflow

This handles the behavior of content in an element when the content is too large to fit within the element's content area.

overflow attributes
visible	hidden	scroll	auto
visible This is an example. This handles the behavior of content in an element when the content is too large to fit within the element's content area. This is an example. This handles the behavior of content in an element when the content is too large to fit within the element's content area.	hidden This is an example. This handles the behavior of content in an element when the content is too large to fit within the element's content area. This is an example. This handles the behavior of content in an element when the content is too large to fit within the element's content area.	scroll This is an example. This handles the behavior of content in an element when the content is too large to fit within the element's content area. This is an example. This handles the behavior of content in an element when the content is too large to fit within the element's content area.	auto This is an example. This handles the behavior of content in an element when the content is too large to fit within the element's content area. This is an example. This handles the behavior of content in an element when the content is too large to fit within the element's content area.

padding

padding-top: 4em
padding-right: 4em
padding-bottom: 4em
padding-left: 4em
padding: 1em 4em 3em 10em
padding: 1em 2em
padding: 1em 2em 3em
padding: 2em

border-style

none
hidden
solid
double
dotted
dashed
groove
ridge
inset
outset

border-top-style: solid;
  border-right-style: dotted; 
  border-bottom-style: dashed; 
  border-left-style: double;

overflow: scroll; border-style: groove ridge inset outset;

border: 1px; border-style: none none solid none

border-width

```
border-width: thin
```
```
border-width: medium
```
```
border-width: thick
```
```
border-width: 1em
```

border-top-width: thin; 
border-right-width: medium; 
border-bottom-width: thick; 
border-left-width: 1em;

```
border-width: 10px 5px 2px 1px
```

border-color

border-top-color: crimson;
border-right-color: gold;
border-bottom-color: teal;
border-left-color: midnightblue;

```
border-color: pink ivory aqua plum
```

border (shortcut property)

border-top: orange 0.5em solid; 
border-right: 1em dotted khaki;
border-bottom: midnightblue 2px dotted;
border-left: 50px groove rgba(100%,0%,20%,0.5)

```
border: hotpink 0.5em ridge
```

border-radius

border-top-left-radius: 1em; 
border-top-right-radius: 2em; 
border-bottom-right-radius: 100px; 
border-bottom-left-radius: 5%

```
border-radius: 1em
```
```
border-radius: 1em 2em
```
```
border-radius: 1em 2em 5em
```
```
border-radius: 1em 2em 5em 0.5em
```
```
border-radius: 20%
```
```
border-radius: 1em 2em 5em 0.5em
```

border-top-right-radius: 100px 50px;
border-bottom-left-radius: 30% 30%

border-radius: 1em 2em 5em 0.5em/1em 2em

```
border-radius: 5em / 3em
```

border-image

border-image: url(media/border_pic.png) 100 fill / 50px / 10px stretch

border-image-source: url(media/border_pic.png);
border-image-slice: 100 fill;
border-image-width: 50px;
border-image-repeat: stretch;
border-image-outset: 10px

border-image: url(media/border_pic.png) 50 / 25px / 50px repeat

border-image-source: url(media/border_pic.png); 
border-image-slice: 50;
border-image-width: 25px; 
border-image-repeat: repeat; 
border-image-outset: 50px

margin

The XOXOs are to show where the margins at the top and bottom end. There is no way to visually indicate where the margins are. Applying a 20% margin to the sides of the body element is a nice way to give a website side cushions for breathing space.

Keep in mind that margins can have quirky behavior. Consider if 'collapsing margins' may be causing layout issues if there is some unknown problem. The only time top and bottom margins don't collapse is for floated or abolutely positioned elements. Left and right margins never collapse.

0XOXOXOXOXOXOXOXOXOXOXOXOX0XOXOXOXOXOXOXOXOXOXOXOXOX0XOXOXOXOXOXOXOXOXOXOXO
margin: 2em 0 1% 250px
margin-top: 2em;
margin-right: 0;
margin-bottom: 1%;
margin-left: 250px
0XOXOXOXOXOXOXOXOXOXOXOXOX0XOXOXOXOXOXOXOXOXOXOXOXOX0XOXOXOXOXOXOXOXOXOXOXO
margin: 2em
This is an example of margins on an inline element. Note that margins on inline text only make space on the left-right axis, not the top or bottom. However, margins work normally on other inline elements like pictures.
This is an example. Two elements can become overlapped by using negative values for margins. Let's test it now, shall we? How will the content overflow when on top of each other like this?

margin: -3em
This is an example. Two elements can become overlapped by using negative values for margins. Let's test it now.

box-shadow

box-shadow: 6px 6px red
box-shadow: 6px 6px 5px green
box-shadow: 6px 6px 5px 10px blue
box-shadow: inset 6px 6px 5px 10px purple

CSS Outlines

These do not effect the spacing or other aspects of anything else on the page, so it is a good tool to help check the layout aspects of your design.

Unlike borders, outline attributes cannot have effects isolated to specific sides; each attributes effects the whole outline. Outline styles are the same as border styles with the addition of 'auto' and the exclusion of 'hidden'. The offset attribute draws a line just outside the border edge by default, but can be pushed beyond the border by a designated length.

outline-style: solid
outline-width: thick
outline-color: blue
outline-offset: 1em
outline: solid thick blue