padding css
padding:10px 5px 15px 20px;
means
top padding is 10px
right padding is 5px
bottom padding is 15px
left padding is 20pxpadding css
padding:10px 5px 15px 20px;
means
top padding is 10px
right padding is 5px
bottom padding is 15px
left padding is 20pxmargin vs padding
Margin is on the outside of block elements, padding is on the inside.
Use margin to separate the block from things outside it
Use padding to move the contents away from the edges of the block.
Main differences:
- Vertical margins of adjacent items will overlap, padding will not
- Padding is included in the click region and background color/image,
but not the marginhtml box
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.box {
height:5px;
width:5px;
background-color:blue;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
color:blue;
border-width: 15px 15px 15px 15px;
border-color: blue;
border-style: solid;
border-radius: 70%
outline-color: blue;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}
</style>
<div class="box">
<h1 style="color:black;position:absolute;font-family:helvetical;font-size:20px;left:20px;bottom:325px;">Your Text</h1>
</div>
</body>
</html>css box model
/********************** CONTENT *************************
The box that contains the actual element content like text,
image, icon, gif, video,... */
tag_name {
height: 90px;
width: 200px;
}
/********************** PADDING *************************
Distance between the content and the border. The background color,
of the element will never affect this space. But you can see this by
contrasting with the background color of the parent element that
contains your element*/
tag_name {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
/*OR: */
tag_name {
padding: 25px 50px 75px 100px; /* top; right; bottom; left */
}
tag_name {
padding: 25px 50px 75px; /* top; right_&_left; bottom */
}
tag_name {
padding: 25px 50px; /* top_&_bottom; right_&_left */
}
tag_name {
padding: 25px; /* top_&_bottom_&_right_&_left */
}
/********************** BORDER *************************
You can define a frame for your element's box. You can
only see the border, after you define a style for that
property */
tag_name {
border-width: 5px 70px 10px 28px; /* or border-bottom-width: 10px; ... */
border-color: blue; /* or border-top-color: #b52e2e; ... */
border-style: dotted; /* or dashed, or solid, or ... */
border-radius: 70% /* making the corners more rounded */
}
/*OR: */
tag_name {
border: 5px solid red; /* all_widths; style; color */
}
tag_name {
border-left: 6px dotted green; /* width; style; color */
border-top: 34px groove yellow; /* width; style; color */
}
/********************** OUTLINE *************************
It's a line that's drawn around your html element, but
contrary to the border, the dimensions of the outline
aren't taken into account. It's drawn around elements,
outside the borders, to make the element "stand out" */
tag_name {
outline-width: thin; /* or medium; thick; outline-width: 4px; ... */
outline-color: blue; /* or #b52e2e; invert; ... */
outline-style: dotted; /* or dashed, or solid, or ... */
outline-offset: /* making the corners more rounded */
}
/*OR: */
tag_name {
outline: dashed;
}
tag_name {
outline: dotted red;
}
tag_name {
outline: 5px solid yellow; /* all_widths; style; color */
}
tag_name {
outline: thick ridge pink;
}
/********************** MARGIN *************************
This is the distance that separates an html element,
from the other elements around it. The background color,
of the element will never afect this space, because the
margin doesn't have background color. The margin is an
invisible border or space between two objects */
tag_name {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
/*OR: */
tag_name {
margin: 25px 50px 75px 100px; /* top; right; bottom; left */
}
tag_name {
margin: 25px 50px 75px; /* top; right_&_left; bottom */
}
tag_name {
margin: 25px 50px; /* top_&_bottom; right_&_left */
}
tag_name {
margin: 25px; /* top_&_bottom_&_right_&_left */
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
