Lab#7 CSS Box Model

LAB#7 Margin, Padding, Border

322 432 Web Design Technology

By Yaowaluck Promdee, Sumonta Kasemvilas

Computer Science Khon Kaen University

CSS – Box Model Margin – Clears an area outside the border.

The margin is transparent

Border – A border that goes around the padding and content

Padding – Clears an area around the content. The padding is transparent

The content of the box, where text and images appear

Border

Property Description Value Example

border-width

is used to set the width of the border

thin medium thick length

10 px;, 10 pt;

border-style The border-style property specifies what kind of border to display

none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

Border (Cont.)

• border-top-width • border-top-style • border-top-color • border-top

Sets all the top border properties

• border-bottom-width • border-bottom-style • border-bottom-color • border-bottom

}

} Sets all the bottom border properties

Border (Cont.)

• border-right-width • border-right-style • border-right-color • border-right

} }

• border-left-width • border-left-style • border-left-color • border-left

Sets all the left border properties

Sets all the right border properties

Outline

p {

border: 1px solid red;

outline-style: dotted;

outline-color: #00ff00; }

outline Sets all the outline properties in one

declaration

outline-color

outline-style

outline-width

inherit

outline-color Sets the color of an outline color_name

hex_number

rgb_number

invert

inherit

outline-style Sets the style of an outline none

dotted

dashed

solid

double

groove

ridge

inset

outset

inherit

outline-width Sets the width of an outline thin

medium

thick

length

inherit

CSS3 Borders

• border-radius • box-shadow

box-shadow: 10px 10px 5px #888888;

border-radius: 25px;

CSS3 Borders

• border-image

border-image:url(border.png) 30 30 round;

-webkit-border-image:url(border.png) 30 30 round;

/* Safari 5 and older */

-o-border-image:url(border.png) 30 30 round;

/* Opera */

Example1 Border

Try it yourself!

Box1 green size 5px

Box2 red

Box3 top size is 1 px, left and right size are 10

px and bottom size is 20 px

Margin and Padding

Margin and Padding (Out put)

Margin and Padding

Top Right

Bottom

Left

/*Set All margin */

Margin and Padding

/* use Margin shorthand*/ h1 {margin:5px 10px 5px 10px;} /* instead of */ h1 {margin-top:5px; margin-right:10px; margin-bottom:5px; margin-left:10px; } /*shorthand*/ h2 { margin:5px 10px 5px; } h3 { margin:5px 10px; }

top

bottom

Left and Right

Top & Bottom Left & Right

<div style="margin:20px; padding:20px; border:20px solid blue"> Massage in Box <br /> Padding Margin Border<br /> Example lab#7 Box Model 322432 Web design

technology Computer Science Khon Kaen University </div> Copyright by 322432 Web design technology Computer Science Khon Kaen University

Example2 Margin, Padding

Example3

Line1 font > Comic Sans MS size 36px

Line2 Top and bottom are 25 px

Line3 Word space is 1 em, all uppercase

LAB#7 Box Model

- Create four web pages by display results as

shown in example 1-4.

- You have to finish this assignment in lab hour. -- Zip All Files > Example 1-4 and name

“Lab7_YourID_Section.zip”

Example 4 Design Box

Q & A ?