Good work! If you didn't notice much of a difference, don't worry. Our <div>s wereblock elements by default; as we specify different display values, they'll start to move around.
As mentioned, any element that comes in as a block (say, a paragraph) will automatically take up the full width of the page, no matter how much or how little content you put in.
If we specify a display of inline-block, however, our blocks are still blocks, but will be able to sit next to each other on the same line.
Instructions
Change the
display property of all your<div>s so the value is now inline-blockinstead of block.
* {
border: 1px dashed blue;
}
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
display:inline-block;
}
#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