Boxes mashing together in lesson 4. Inline


#1

In Lesson Four, Inline, when I made the display for div 'inline', the boxes all mashed together in a small clump. I'm just checking if this is intentional or a bug. This is not preventing me from completing the lesson, however.

<!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>

<!--Cascading Style Sheets-->
* {
	border: 1px dashed blue;
}

div {
	height: 50px;
	width: 100px;
	border: 2px solid black;
	border-radius: 5px;
	/*Add your CSS here!*/
	display:inline;
}

#one {
	background-color: #FF0000;
}

#two {
	background-color: #0000FF;
}

#three {
	background-color: #FFD700;
}

#four {
	background-color: #308014;
}


#2

this is exactly what inline is suppose to do

elements only take the space they need when they are inline. What you see are the borders

see what happens when you add text inside your div:

<div id="one">see?</div>

#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.