The good news is, inline places all your elements on a single line. The bad news is that it doesn't maintain their "box"ness: as you saw, all your <div>s got squished to the smallest possible width!
The inline display value is better suited for HTML elements that are blocks by default, such as headers and paragraphs.
Finally, we'll try out the display value none. As you might expect, this prevents the page from displaying the selected element. As you mightnot expect, this removes the selected element from the page entirely, including any children and any content. Poof! Gone! (But not gone forever—changing the display value away from none will bring everything back.)
Instructions
Give it a whirl! Set all your
<div>s' displayproperty to the none value.
* {
border: 1px dashed blue;
}
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
display:none;
}
#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