Now that you understand more about the display property and the box model, we can delve into the details of how each individual box behaves.
Check out the diagram in the Result tab (it's the one from the first exercise in this lesson). As you can see, each box is made of layers. From the outermost to the innermost:
The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other.
The border is the edge of the element. It's what we've been making visible every time we set the border property.
The padding is the spacing between the content and the border. We can adjust this value with CSS to move the border closer to or farther from the content.
The content is the actual "stuff" in the box. If we're talking about a <p> element, the "stuff" is the text of the paragraph.
You'll see abbreviations like TM, TB, and TP in the diagram. These stand for "top margin," "top border," and "top padding." As we'll see, we can adjust the top, right, left, and bottom padding, border, and margin individually.
Instructions
Study the diagram in the Result tab until you're comfortable with where the padding, border, and margin go. Then hit Save & Submit Code to start adjusting these properties!
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<h3>The Box Model</h3>
<img src="http://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png"/>
<p>Image courtesy of www.w3.org!</p>
</body>
</html>
No comments:
Post a Comment