0

CSS Beginners Understanding margin and padding properties


CSS beginners must understanding margin and padding properties, every HTML element spacing depending on margin and padding. I hope this Article will help you to better understand the CSS beginners.
Let’s create some div and assign the margin and padding properties



Padding property
The CSS padding properties define the space inside element. You can define the padding value the following way

padding-top: 10px ;
padding-right: 10px ;
padding-bottom: 10px ;
padding-left: 10px ;

You can also use the shorthand property:
Example1:
padding: 10px ; 
padding: all four padding’s are same (10px) ;

Screenshot:
margin and padding

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS padding Article</title>
<style>
body {
     background: #23353B;
     font-family: font-family :Arial,Helvetica,sans-serif;
}
div {
     padding-top: 10px;
     padding-right: 10px;
     padding-bottom: 10px;
     padding-left: 10px;
     background: #E2E2E2;
}
p {
     background: #66CCCC;
     font-size: 26px;
     text-align: center;
}
</style>
</head>

<body>
<div>
<p>
padding example code
</p>
</div>
</body>
</html>
DEMO

Example2:
padding: 15px 30px 45px 60px ; 
padding: top  right  bottom  left ;

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS padding Article</title>
<style>
body {
     background: #23353B;
     font-family: font-family :Arial,Helvetica,sans-serif;
}
div {
     padding: 15px 30px 45px 60px ;
     /* top(15px)  right(30px)  bottom(45px)  left(60px) */
     background: #E2E2E2;
}
p {
     background: #66CCCC;
     font-size: 26px;
     text-align: center;
}
</style>
</head>

<body>
<div>
<p>
padding example code
</p>
</div>
</body>
</html>
DEMO

Example3:
padding: 15px 20px 40px; 
padding:  top value(15px)   right value  and left values same(20px)   bottom value(40px) ;

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS padding Article</title>
<style>
body {
     background: #23353B;
     font-family: font-family :Arial,Helvetica,sans-serif;
}
div {
     padding:15px 20px 40px;
     /*  top value(15px)   right value  and left values same(20px)  bottom value(40px) ; */
     background: #E2E2E2;
}
p {
     background: #66CCCC;
     font-size: 26px;
     text-align: center;
}
</style>
</head>

<body>
<div>
<p>
padding example code
</p>
</div>
</body>
</html>
DEMO

Example4:
padding: 10px 20px ; 
padding:  top and bottom values(10px)    right and left values same(20px) ;

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS padding Article</title>
<style>
body {
     background: #23353B;
     font-family: font-family :Arial,Helvetica,sans-serif;
}
div {
     padding: 10px 20px;
     /*   top and bottom values(10px)    right and left values same(20px)  */
     background: #E2E2E2;
}
p {
     background: #66CCCC;
     font-size: 26px;
     text-align: center;
}
</style>
</head>

<body>
<div>
<p>
padding example code
</p>
</div>
</body>
</html>
DEMO

Margin property
The CSS margin properties define the space outside element. You can define the element margin values the following way:

margin-top: 25px ;
margin-bottom: 25px ;
margin-right: 50px ;
margin-left: 50px ;

You can also use the shorthand property:

Example1:
margin: 25px 50px 75px 100px; 
margin:  top   right   bottom    left ;

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS margin Article</title>
<style>
body {
     background: #23353B;
     font-family: font-family :Arial,Helvetica,sans-serif;
}
div {
     margin-top: 25px;
     margin-right: 50px;
     margin-bottom: 75px;
     margin-left: 100px;
     background: #E2E2E2;
}
p {
     background: #66CCCC;
     font-size: 26px;
     text-align: center;
}
</style>
</head>

<body>
<div>
<p>
padding example code
</p>
</div>
</body>
</html>
DEMO
Example2:
margin: 15px 30px 40px; 
margin: top value(15px)   right value  and left values same(30px)   bottom value(40px) ;

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS margin Article</title>
<style>
body {
     background: #23353B;
     font-family: font-family :Arial,Helvetica,sans-serif;
}
div {
     margin: 15px 30px 40px;
     /* : top value(15px)   right value  and left values same(30px)  bottom value(40px) */
     background: #E2E2E2;
}
p {
     background: #66CCCC;
     font-size: 26px;
     text-align: center;
}
</style>
</head>

<body>
<div>
<p>
padding example code
</p>
</div>
</body>
</html>
DEMO
Example3:
margin: 25px 50px; 
margin: top and bottom values same (25px)    right and left values same (50px) ;

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS margin Article</title>
<style>
body {
     background: #23353B;
     font-family: font-family :Arial,Helvetica,sans-serif;
}
div {
     margin: 25px 50px;
     /*  top and bottom values same (25px)    right and left values same(50px) */
     background: #E2E2E2;
}

p {
     background: #66CCCC;
     font-size: 26px;
     text-align: center;
}
</style>
</head>

<body>
<div>
<p>
padding example code
</p>
</div>
</body>
</html>
DEMO
Example4:
margin: 20px; 
margin: all four margin’s  are same (20px) ;

Code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS margin Article</title>
<style>
body {
     background: #23353B;
     font-family: font-family :Arial,Helvetica,sans-serif;
} 
div {
     margin: 20px;
     /*  all four margin’s  are same (20px) */
     background: #E2E2E2;
}
p {
     background: #66CCCC;
     font-size: 26px;
     text-align: center;
}
</style>
</head>

<body>
<div>
<p>
padding example code
</p>
</div>
</body>
</html>
DEMO

Unknown

nowstartwebdesign.com tutorial has been prepared for the beginners to help them understand basic HTML programming. After completing this tutorial you will find yourself at a moderate level of expertise Web Designing from where you can take yourself to next levels

No comments :

Post a Comment