Sorting your friends and margins


#1

https://www.codecademy.com/en/courses/web-beginner-en-jNuXw/0/1?curriculum_id=50579fb998b470000202dc8b

When I'm trying to add links/pictures to the different divisions, they all seem to have their own margins. Can someone help me understand what is happening with the margins and how I can get them to be in line?


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
		<div class="friend" id="best_friend"></div>
		<div class="family"><a href="www.google.com">Google
		</a></div>
		<div class="enemy" id="archnemesis"><p>Harry Potter</p></div>
	</body>
</html>

div {
    position: relative;
	display: inline-block;
	margin-left: 5px;
	height: 100px;
	width: 100px;
	border: 2px solid black;
	border-radius: 100%;
	margin-top: 5px;
	text-align: center;
}

div p {
	position: relative;
	margin-top: 40px;
	font-size: 12px;
}

div a {
	position: relative;
	margin-top: 40px;
	font-size: 12px;
}

.friend {
    border: 2px dashed #008000;
}

.family {
    border: 2px dashed #0000ff;
}

.enemy {
    border: 2px dashed #ff0000;
}

#best_friend {
    border: 4px solid #00c957;
    background-image: url("http://www.chicagonow.com/everyday-me/files/2015/09/childhoodfriends.jpg");
    background-size: 95px 100px 
}

#archnemesis {
    border: 4px solid #cc0000;


#2

each div will have a margin left and top as set above ^

What do you want inline ?


#3

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