What are padding, margin and border in website? What is Concept of Padding, margin and border in Websites?
Lecture No.2
Today our discussion is on Padding, margin and border of a
web page. This is an important lecture of website development.
CSS Margins
The CSS
margin properties are used to create space around elements, outside
of any defined borders.
With CSS, you have full control over the margins. There are
properties for setting the margin for each side of an element (top, right,
bottom, and left).
Margin - Individual Sides
CSS has properties for specifying the margin for
each side of an element:
- margin-top
- margin-right
- margin-bottom
- margin-left
Border:
CSS has border properties for specifying element to border:
Syntax:
Border: 1px solid black
Padding
The CSS
padding properties are used to generate space around an element's content,
inside of any defined borders.
Padding - Individual Sides
CSS has
properties for specifying the padding for each side of an element:
• padding-top
• padding-right
• padding-bottom
• padding-left
All the
padding properties can have the following values:
• length - specifies a padding in px,
pt, cm, etc.
• % - specifies a padding in % of the
width of the containing element
• inherit - specifies that the padding
should be inherited from the parent element
Note: Negative values are not allowed.
These are
the code of padding, border and margin layout
|
<html>
|
|
|
<head>
|
|
|
<title> Second Task </title>
|
|
|
<style>
|
|
|
#main{
|
|
|
width: 1260px;
|
|
|
height: 600px;
|
|
|
margin-left: 30px;
|
|
|
margin-right: 20px;
|
|
|
background-color: gray;
|
|
|
}
|
|
|
#logo{
|
|
|
width: 180px;
|
|
|
height: 80px;
|
|
|
padding-left:20px;
|
|
|
margin-left:10px;
|
|
|
background-color: white;
|
|
|
border: 1px solid black;
|
|
|
}
|
|
|
#link{
|
|
|
width: 325px;
|
|
|
height: 38px;
|
|
|
padding-left: 25px;
|
|
|
background-color: white;
|
|
|
border: 1px solid black;
|
|
|
margin-left: 900px;
|
|
|
margin-top: -80px;
|
|
|
}
|
|
|
#navigation{
|
|
|
width: 280px;
|
|
|
height: 30px;
|
|
|
padding-top: 5px;
|
|
|
padding-left: 170px;
|
|
|
background-color: white;
|
|
|
border: 1px solid black;
|
|
|
margin-left: 800px;
|
|
|
margin-top: 4px;
|
|
|
}
|
|
|
#slider{
|
|
|
width: 1240px;
|
|
|
height: 300px;
|
|
|
margin-left:10px;
|
|
|
background-color: white;
|
|
|
border: 1px solid black;
|
|
|
margin-top: 4px;
|
|
|
}
|
|
|
#firstsemster{
|
|
|
width: 200px;
|
|
|
height: 90px;
|
|
|
margin-left: 10px;
|
|
|
background-color: white;
|
|
|
border: 1px solid black;
|
|
|
margin-top: 4px;
|
|
|
}
|
|
|
#secondbox{
|
|
|
width: 200px;
|
|
|
/*position: absolute;
|
|
|
left: 0;*/
|
|
|
height: 90px;
|
|
|
background-color: white;
|
|
|
border: 1px solid black;
|
|
|
margin-left: 525px;
|
|
|
margin-top: -90px;
|
|
|
}
|
|
|
#thirdbox{
|
|
|
width: 200px;
|
|
|
height: 90px;
|
|
|
background-color: white;
|
|
|
border: 1px solid black;
|
|
|
margin-left: 1050px;
|
|
|
margin-top: -90px;
|
|
|
}
|
|
|
#footer{
|
|
|
width: 640px;
|
|
|
height: 100px;
|
|
|
margin-left: 10px;
|
|
|
padding-left: 600px;
|
|
|
border: 1px solid black;
|
|
|
margin-top: 4px;
|
|
|
}
|
|
|
/*#slider{
|
|
|
position: relative;
|
|
|
top: 0;
|
|
|
}#h1{
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
}/*
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="main">
|
|
|
<div id="logo"> <h1>
Logo </h1> </div>
|
|
|
<div id="link"> <p>
Social Media Links </p> </div>
|
|
|
<div id="navigation">
Primary navigation </div>
|
|
|
<div id="slider"> <h1
id="h1"> Hero image....</h1>
|
|
|
<br>images slideshow/ video/
Big Image And Text
|
|
|
</div>
|
|
|
<div id="firstsemster">
First semster </div>
|
|
|
<div id="secondbox">
Second box </div>
|
|
|
<div id="thirdbox">
Third box </div>
|
|
|
<div id="footer"> Footer
</div>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html>
|
|
No comments:
Post a Comment