BOX MODEL OF CSS:
MARGIN:
This is the space from the edge of the screen to the border.
Here is how we can use it:
margin-left:300px;
margin-top:100px;
or we may also write:
margin:20px applied to all four sides
margin:10px 20px applied 10px to top and bottom ; 20px to left and right
Here is a way to set equally auto margin
margin: 10px auto apply 10px to the top and bottom ; auto to both sides of left and right
BORDER:
This is the border around the element. Its basic syntax is :
border-bottom-style : outset;
border-bottom-color: #0066FF;
border-bottom-width: thick;
/*Here is the short hand method to apply same border in all four directions*/
border : thick outset #0000CC;
Border Radius:
We may also apply border radius that how curve the border corners should be.
To apply on all four border we may write:
border-radius:10px
or border-radius:10px 10px 10px 10px
Note: The first parameter will be applied to top left corner and then it will go farther in clockwise manner.
To apply on diagonal border corners:
border-radius:10px 20px;
PADDING:
The space between the border and the content.
The padding can also be applied to:
padding-top , padding-bottom , padding-left ,padding-right.
Just like border we may also apply in padding:
padding : 13px 20px 12px 18px
Moving clockwise:
13px : top
20px : right
12px : bottom
18px : left
padding : 13px 20px padding applied 13px top and bottom ; 20px to left and right
BOX-SHADOW:
Here is another interesting way to make the box model more attractive. Using box-shadow, we can create the shadow effect on the borders of the content.
EXAMPLE:
Box-shadow: 0 0 5px rgba(0,0,0,0.5)
NOTE : The first three parameters are the x , y and z axis of the shadow where as RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
CONTENT:
This is the content what we want to display on the screen.
Example:
Here is an example which shows each box coding:
<!DOCTYPE html>
<html>
<head>
<title>borders</title>
<style>
p{
width:50%;
margin-left:300px;
margin-top:100px;
padding:100px;
font-size:x-large;
/*border-bottom-style:outset;
border-bottom-color:#0066FF;
border-bottom-width:thick;*/
/*Here is the short hand method to apply same border in all four directions*/
border:thick outset #0000CC;
border-radius:20px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in sem mauris. Aenean nec lectus arcu. In mollis lobortis quam at suscipit. Sed finibus, sem ac feugiat ultrices, mauris ligula vestibulum arcu, iaculis mollis diam ligula ut ex. Vivamus id varius urna, sit amet fermentum lectus. Maecenas volutpat lacinia nulla, quis ultricies sem posuere ac. Proin at consectetur mauris. Curabitur ipsum est, feugiat quis neque ut, egestas feugiat nunc. Morbi maximus nisl vitae nisl porttitor, non egestas ipsum euismod. In eu nisl rutrum, fringilla justo et, feugiat mi. Aenean et dolor gravida, tempus elit vel, viverra quam. Quisque in vestibulum purus.</p>
</body>
</html>
0 Comments