Did you see that? Your <div> got huge! That's because the background color is the same for the content and the padding.
When you give CSS a positive padding or margin value, it puts that space between the element and its reference: for instance, if you have a <div> and you give it a margin-left of20px, it puts twenty pixels between the left margin of that <div> and the side of the screen. This effectively moves the <div>twenty pixels to the right.
If you want to move an element in the other direction, you can give CSS a negative value:margin-left: -20px will move the element twenty pixels to the left.
Instructions
Give your
<div> a margin-top of -20px to see what happens.
* {
border: 1px dashed black;
}
div {
height: 50px;
width: 100px;
border: 4px solid #FF0000;
border-radius: 5px;
background-color: #308014;
margin-top:-20px;
margin-right:50px;
margin-bottom:10px;
margin-left:5px;
padding:40px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div></div>
</body>
</html>
No comments:
Post a Comment