Chapter 8 : Margin &

Chapter 10 Boarder
By : Jean Nicka Parba and Jvince Capistrano
Chapter 8: Margins
Parameter Details

● 0 set margin to none

● Auto used for centering, by evenly setting values on each side
● units (e.g., px) see parameter section in Units for a list of valid units
● Inherit inherit margin value from parent element
● Initial restore to initial value
Section 8.1: Margin Collapsing
When two margins are touching each other vertically, they are collapsed. When two margins touch
horizontally, they do not collapse.

Example of adjacent vertical margins:

Consider the following styles and markup:

div{
margin: 10px;
}
<div> They
They will be10px
will be 10px apart
apart since vertical
some content since vertical
margins margins
collapse over one and other. (The
</div> spacing over
collapse will not be the
one and sum of two
margins.)
<div> other. (The spacing will
some more content not be the sum of two
</div> margins.)
Example of adjacent horizontal
margins:

Consider the following styles and markup:

span{
margin: 10px;
}
<span>some</span><span>content</span>

They will be 20px apart since horizontal margins don't collapse over one and other. (The spacing will be the
sum of two margins.)
Overlapping with different sizes
. top{
These elements will be spaced 15px apart
margin: 10px; vertically. The margins overlap as much as
they can, but the larger margin will determine
}
the spacing between the elements.
. bottom{

margin: 15px;

<div class=”top”>

Some content

</div>

<div class = ”bottom”>

Some more content

</div>
Overlapping margin gotcha

.outer-top{ <div class=”inner-top”>

margin : 10px; some content
} </div>
.inner-top{ </div>
margin : 20px; <div class=”outer-bottom”>
} <div class=”inner-bottom”>
.outer-bottom{ some more content
margin : 20px; </div>
} </div>
.inner-bottom{
margin : 25px;
}
<div class=”outer-top”>

What will be the spacing between the two texts?

The spacing will be 25px. Since all four margins are touching each other, they will collapse,
thus using the largest margin of the four.

Now, what about if we add some borders to the markup above.

div{
border: 1px solid red;
}

What will be the spacing between the two texts?

The spacing will be 59px! Now only the margins of .outer-top and .outer-bottom touch each other, and are
the only collapsed margins. The remaining margins are separated by the borders. So we have 1px + 10px +
1px + 15px + 20px + 1px + 25px + 1px. (The 1px's are the borders...)
Collapsing Margins Between Parent and Child Elements:

HTML: CSS
<h1>Title</h1> h1 {
margin: 0;
<div> background: #cff;
<p>Paragraph</p> }
</div> div {
margin: 50px 0 0 0;
background: #cfc;
}
p{
margin: 25px 0 0 0;
background: #cf9;
}

In the example above, only the largest margin applies. You may have expected that the paragraph
would be located 60px from the h1 (since the div element has a margin-top of 40px and the p has a
20px margin-top). This does not happen because the margins collapse together to form one margin.
Section 8.2: Apply Margin on a Given Side
Direction-Specific Properties

CSS allows you to specify a given side to apply margin to. The four properties provided for this purpose are:

margin-left
margin-right
margin-top
margin-bottom

The following code would apply a margin of 30 pixels to the left side of the selected div.

HTML

<div id="myDiv"></div>

CSS
#myDiv {
margin-left: 30px;
height: 40px;
width: 40px;
background-color: red;
}

Parameter Details
margin-left The direction in which the margin should be applied.
30px The width of the margin.
Specifying Direction Using Shorthand Property
The standard margin property can be expanded to specify differing widths to each side of the
selected elements.
The syntax for doing this is as follows:
margin: <top> <right> <bottom> <left>;

The following example applies a zero-width margin to the top of the div, a 10px margin to the right side, a
50px
margin to the left side, and a 100px margin to the left side

HTML

<div id="myDiv"></div>

CSS

#myDiv {
margin: 0 10px 50px 100px;
height: 40px;
width: 40px;
background-color: red;
Section 8.3: Margin property simplification
p{
margin : 1px; /* 1px margin in all directions Another
*/ Example:

/*equals to:*/ p{
margin : 10px 15px; /* 10px margin-top & bottom And
margin : 1px 1px; 15px margin-right & left*/

/*equals to:*/ /*equals to:*/

margin : 1px 1px 1px; margin : 10px 15px 10px 15px;

/*equals to:*/ /*equals to:*/

margin : 1px 1px 1px 1px; margin : 10px 15px 10px;
}
/* margin left will be calculated from the margin right value
(=15px) */
}
Section 8.4: Horizontally center elements on a page using margin

As long as the element is a block, and it has an explicitly set width value, margins can be used to center block
elements on a page horizontally.

We add a width value that is lower than the width of the window and the auto property of margin then distributes
the remaining space to the left and the right:

#myDiv {
width:80%;
margin:0 auto;
}

In the example above we use the shorthand margin declaration to first set 0 to the top and bottom margin values
(although this could be any value) and then we use auto to let the browser allocate the space automatically to the
left and right margin values.

In the example above, the #myDiv element is set to 80% width which leaves use 20% leftover. The browser
distributes this value to the remaining sides so:

(100% - 80%) / 2 = 10%

 Section 8.5: Example 1:
It is obvious to assume that the percentage value of margin to margin-left and margin-right would be relative to its parent element.

.parent {
width : 500px;
height : 300px;
}
.child {
width : 100px;
height : 100px;
margin-left : 10%; /* (parentWidth * 10/100) => 50px */
}

But that is not the case, when comes to margin-top and margin-bottom. Both these properties, in percentages,
aren't relative to the height of the parent container but to the width of the parent container.

So,

.parent {
width : 500px;
height: 300px;
}
.child {
width : 100px;
height : 100px;
margin-left : 10%; /* (parentWidth * 10/100) => 50px */
margin-top: 20%; /* (parentWidth * 20/100) => 100px */
Section 8.6: Negative margins

Margin is one of a few CSS properties that can be set to negative values. This property can be used
to overlap
elements without absolute positioning.

div{
display: inline;
}
#over{
margin-left: -20px;
}
<div>Base div</div>
<div id="over">Overlapping div</div>
Chapter 9: Padding

Section 9.1:
Padding Shorthand The padding property sets the padding space on all sides of an element. The padding
area is the space between the content of the element and its border. Negative values are not allowed.

To save adding padding to each side individually (using padding-top, padding-left etc) can you write it as a
shorthand, as below:

Four values:

<style>
.myDiv {
padding: 25px 50px 75px 100px; /* top right bottom left; */
}
</style>
<div class="myDiv"></div>
Three values:
<style>
.myDiv {
padding: 25px 50px 75px; /* top left/right bottom */
}
</style>
<div class="myDiv"></div>

Two values:

<style>
.myDiv {
padding: 25px 50px; /* top/bottom left/right */
}
</style>
<div class="myDiv"></div>
One value:

<style>
.myDiv {
padding: 25px; /* top/right/bottom/left */
}
</style>
<div class="myDiv"></div>
Section 9.2: Padding on a given side
The padding property sets the padding space on all sides of an element. The padding area is the space between
the
content of the element and its border. Negative values are not allowed.

You can specify a side individually:

padding-top
padding-right
padding-bottom
padding-left

The following code would add a padding of 5px to the top of the div:

<style>
.myClass {
padding-top: 5px;
}
</style>
<div class="myClass"></div>
Chapter 10: Border
Section 10.1: border-radius
The border-radius property allows you to change the shape of the basic box model.
Every corner of an element can have up to two values, for the vertical and horizontal radius of that corner (for a maximum of 8 values).

The first set of values defines the horizontal radius. The optional second set of values, preceded by a ‘/’ , defines the
vertical radius. If only one set of values is supplied, it is used for both the vertical and horizontal radius.

border-radius: 10px 5% / 20px 25em 30px 35em;

The 10px is the horizontal radius of the top-left-and-bottom-right. And the 5% is the horizontal radius of the topright-and-bottom-left.
The other four values after '/' are the vertical radii for top-left, top-right, bottom-right and
bottom-left.
As with many CSS properties, shorthands can be used for any or all possible values. You can
therefore specify anything from one to eight values. The following shorthand allows you to set the
horizontal and vertical radius of every corner to the same value:

HTML:

<div class='box'></div>

CSS:

.box {
width: 250px;
height: 250px;
background-color: black;
border-radius: 10px;
}

Border-radius is most commonly used to convert box elements into circles. By setting the border-radius
to half of the length of a square element, a circular element is created:

.circle {
width: 200px;
height: 200px;
border-radius: 100px;
}
Because border-radius accepts percentages, it is common to use 50% to avoid manually calculating the
border radius value:

.circle {
width: 150px;
height: 150px;
border-radius: 50%;
}

If the width and height properties are not equal, the resulting shape will be an oval rather than a circle.

Browser specific border-radius example:

-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
Section 10.2: border-style
The border-style property sets the style of an element's border. This property can have from one to four values
(for every side of the element one value.)

Examples:

border-style: dotted;
border-style: dotted solid double dashed;

border-style can also have the values none and hidden. They have the same effect, except hidden works for border conflict
resolution for <table> elements. In a <table> with multiple borders, none has the lowest priority (meaning in a conflict,
the border would show), and hidden has the highest priority (meaning in a conflict, the border would not show).
Section 10.3: Multiple Borders
Using a pseudo element:
Using outline:
.div3 {
.div1{ position: relative;
border: 3px solid black; border: 5px solid #000;
width: 100px;
outline: 6px solid blue;
height: 100px;
width: 100px;
margin: 20px;
height: 100px; }
margin: 20px; .div3:before {
} content: " ";
position: absolute;
border: 5px solid blue;
Using box-shadow: z-index: -1;
top: 5px;
left: 5px;
.div2{
right: 5px;
border: 5px solid green;
bottom: 5px;
box-shadow: 0px 0px 0px 4px #000; }
width: 100px;
height: 100px;
margin: 20px;
}
Section 10.4: border (shorthands)
In most cases you want to define several border properties (border-width, border-style and border-color) for
all
sides of an element.

Instead of writing:

border-width: 1px;
border-style: solid;
border-color: #000;

You can simply write:

border: 1px solid #000;

These shorthands are also available for every side of an element: border-top, border-left, border-right and
border-bottom. So you can do:

border-top: 2px double #aaaaaa;

Section 10.5: border-collapse
The border-collapse property applies only to tables (and elements displayed as display: table or inlinetable)
and sets whether the table borders are collapsed into a single border or detached as in standard HTML.

table {
border-collapse: separate; /* default */
border-spacing: 2px; /* Only works if border-collapse is separate */
}

Also see Tables - border-collapse documentation entry

Section 10.6: border-image

With the border-image property you have the possibility to set an image to be used instead of normal border
styles.

A border-image essentially consist of a

border-image-source: The path to the image to be used

border-image-slice: Specifies the offset that is used to divide the image into nine regions (four corners,
four edges and a middle)
border-image-repeat: Specifies how the images for the sides and the middle of the border image are scaled

Consider the following example wheras border.png is a image of 90x90 pixels:

border-image: url("border.png") 30 stretch;

The image will be split into nine regions with 30x30 pixels. The edges will be used as the corners of the border
while
the side will be used in between. If the element is higher / wider than 30px this part of the image will be
stretched.
The middle part of the image defaults to be transparent.
Section 10.7: Creating a multi-colored border using borderimage
CSS
.bordered {
border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon
60%, maroon 80%, chocolate 80%); /* gradient with required colors */
border-image-slice: 1;
}

HTML
<div class='bordered'>Border on all sides</div>

The above example would produce a border that comprises of 5 different colors. The colors are defined through a
linear-gradient (you can find more information about gradients in the docs). You can find more information
about border-image-slice property in the border-image example in same page.
You'd have noticed that the left border has only a single color (the start color of the gradient)
while the right border
also has only a single color (the gradient's end color). This is because of the way that border
image property works. It is as though the gradient is applied to the entire box and then the colors
are masked from the padding and content areas, thus making it look as though only the border
has the gradient.

Which border(s) have a single color is dependant on the gradient definition. If the gradient is a to
right gradient,
the left border would be the start color of the gradient and right border would be the end color. If
it was a to
bottom gradient the top border would be the gradient's start color and bottom border would be
end color. Below is the output of a to bottom 5 colored gradient.
If the border is required only on specific sides of the element then the border-width property can be used
just like
with any other normal border. For example, adding the below code would produce a border only on the top
of the
element.

border-width: 5px 0px 0px 0px;

Note that, any element that has border-image property won't respect the border-radius (that is the border
won't
curve). This is based on the below statement in the spec:

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by
‘background-clip’)
Section 10.8: border-[left|right|top|bottom]
The border- [left | right I top I bottom] property is used to add a border to a specific side of an
element.

For example if you wanted to add a border to the left side of an element, you could do:

#element {
border-left: 1px solid black;
}
Exercise: Custom Box with Border Radius and Style

Create a div element with the class .simple-box.

Style the box with a width of 300px and height of 300px. OUTPUT:
Add a background color of lightgreen.
Apply a border-radius of 10% 30%.
Add a solid border of 5px in width and color #ff4500
(Orange Red).

Task:
Write the HTML and CSS code that styles this box using the given
properties.
Experiment with changing the border-radius values and observe how
it affects the corners.
Example Output:
You should see a square box with rounded corners, a colorful border,
and a background color.
 Examples:
OUTPUT: