lab#7 css box model
DESCRIPTION
CSS Box Model, Margin, Padding and BorderTRANSCRIPT
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 ?