1

CS428 Web EngineeringLecture 08

Border, Margin, Padding …(CSS - III)

CSS Borders• You can set following border properties of

an element:

The border-color property is used to set the color of the border.

The border-style property is used to set the style of border.

The border-width property is used to set . The border property is used to set the width,

style and color of the border in one declaration.

border-style• <p style=“border-style: none”>

This is a border with none width.</p>

<p style=“border-style: solid”>

This is a solid border.</p>

<p style=“border-style: dashed”>

This is a dashed border.</p>

• Output:

• Possible values:none, solid, dashed, double, groove, ridge, inset, outset

border-color• <style>

p.example1 {

border-style: solid;

border-bottom-color: #009900;

border-top-color: #FF0000;

border-left-color: #330000;

border-right-color: #0000CC;

}

</style>

<p class=“example1”>

This example is showing all borders in different colors.

</p>

• Output:

• Possible values:any color with valid format

border-color• <style>

p.example1 {

border-style: solid;

border-color: #FF0000;

}

</style>

<p class=“example1”>

This example is showing all borders in same color.

</p>

• Output:

• Possible values:any color with valid format

border-width• <p style=“border-width: 4px; border-style:

solid;”>

This is a solid border whose width is 4px.</p>

• Output:

• Possible values:length in px, pt or cm or it should be thin, medium or thick.

7

• You can individually change the width of the bottom, top, left and right borders of an element. Using the following properties:

border-bottom-width changes the width of bottom border.

border-top-width changes the width of top border.

border-left-width changes the width of left border.

border-right-width changes the width of right border.

border-width• <style>

p.example1 {

border-style: solid;

border-bottom-width: 6pt;

border-top-width: 6pt;

border-left-width: 4pt;

border-right-width: 4pt;

}

</style>

<p class=“example1”>

This example is showing all borders in different widths.

</p>

• Output:

• Possible values:any color with valid format

This example is showing all borders in different widths.

border• <p style=“border: 4px solid red;”>

This example is showing shorthand property for border.</p>

• Output:

CSS Margins• You can set following margin properties of

an element: The margin-bottom property specify the

bottom margin of an element. The margin-top property specify the top

margin of an element. The margin-left property specify the left margin

of an element. The margin-right property specify the right

margin of an element. The margin shorthand property for setting

margin properties in one declaration.

margin• <div style=“margin: 20px;”>

This is a paragraph with a specified margin from all sides.</div>

• Output:

• Possible values:auto, length in px, %.

margin-top• <div style=“margin-top: 10px;”>

This is a paragraph with a specified top margin.</div>

• Output:

• Possible values:auto, length in px, %.

margin-bottom• <div style=“margin-bottom: 10px;”>

This is a paragraph with a specified bottom margin.</div>

• Output:

• Possible values:auto, length in px, %.

margin-left• <div style=“margin-left: 10%;”>

This is a paragraph with a specified left margin.</div>

• Output:

• Possible values:auto, length in px, %.

margin-right• <div style=“margin-left: 10%;”>

This is a paragraph with a specified right margin.</div>

• Output:

• Possible values:auto, length in px, %.

16

Margin property• <style>

p {margin: 15px; }

all four margins will be 15px

p {margin: 10px 2%; }

top and bottom margin will be 10px, left and right

will be 2% of the total width of doc.

p {margin: 10px 2% -10px; }

top margin will be 10px, left and right margin will be

2%, bottom margin will be -10px

p {margin: 10px 2% -10px auto; }

top margin will be 10px, right margin will be 2%, bottom

margin will be -10px, left margin will be set by the browser

</style>

CSS Padding• Padding property allows you to specify how

much space should appear between the content of an element and its border : The padding-bottom property specify the bottom

padding of an element. The padding-top property specify the top padding

of an element. The padding-left property specify the left padding

of an element. The padding-right property specify the right

padding of an element. The padding shorthand property serves as the

preceding properties.

padding-bottom• <p style=“padding-bottom: 15px; border-

width: 1px solid black;”>

This is a paragraph with a specified bottom padding.</p>

• Output:

This is a paragraph with a specified bottom padding.

• Possible values:length in px, %.

padding-top• <p style=“padding-top: 15px; border-width:

1px solid black;”>

This is a paragraph with a specified top padding.</p>

• Output:

This is a paragraph with a specified top padding.

• Possible values:length in px, %.

padding-left• <p style=“padding-left: 15px; border-width: 1px

solid black;”>

This is a paragraph with a specified left padding.</p>

• Output:

This is a paragraph with a specified top padding.

• Possible values:length in px, %.

padding-right• <p style=“padding-right: 15px; border-width:

1px solid black;”>

This is a paragraph with a specified right padding.</p>

• Output:

This is a paragraph with a specified top padding.

• Possible values:length in px, %.

padding• <p style=“padding: 15px; border-width: 1px

solid black;”>

This is a paragraph with a specified right padding.</p>

• Output:

This is a paragraph with a specified top padding.

• Possible values:length in px, %.

Padding and Margin Properties

• Values for both the padding and the margin properties can be expressed using:

• em (em values)• px (pixels)• mm (millimeters)• cm (centimeters)• in (inches)• % (percentage of the container element)

24

CSS display property• You can control how an element is displayed

with the display property.

• Example:

img {

display: block;

}

• Possible values:

block, inline, list-item, none

25

CSS float property• The float property changes how text and or images

within an element are displayed.

• Example:

img {

float: left;

margin-right: 10px;

}

• Possible values:

left, right, none

26

<div id=“box”>Here is some text which wraps around the box floated to the left.

Here is some text which wraps around the image floated to the left.

27

CSS clear property• The clear property is used to force an element that is

adjacent to a float element to start on the next line below the floated element.

• Example:

#box3 {

clear: both;

background-color: white;

border: 1px solid #000;

}

• Possible values:

left, right, both, none

28

div id=“box1” div id=“box2”

div id=“box3”

29

CSS overflow property• You can control what an elements contents will do

if it overflows it boundaries with the overflow property.

• Example:

div {

overflow: auto;

}

• Possible values:

auto, hidden, visible, scroll

30