Cool, right? Each HTML element gets its own box to live in.
As you saw, the outermost box of each element went all the way across the page. This is why until now, your HTML elements have been sitting on top of one another: by default, they take up the full width of the page.
We can change all this with the first positioning property we'll learn: the displayproperty. We'll learn about four possible values.
block: This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width.
inline-block: This makes the element a block box, but will allow other elements to sit next to it on the same line.
inline: This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line).
none: This makes the element and its content disappear from the page entirely!
Instructions
Let's get cracking. Set the
display of all<div>s to block.
* {
border: 1px dashed blue;
}
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
display:black;
}
#one {
background-color: #FF0000;
}
#two {
background-color: #0000FF;
}
#three {
background-color: #FFD700;
}
#four {
background-color: #308014;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</body>
</html>
No comments:
Post a Comment