More positioning changes questions


#1

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


The circles change position depending on whether the p tag is empty, has one line, or has two lines. Why? How to correct?


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<div class="friend"><p>John</p></div>
		<div class="family"><p></p></div>
		<div class="enemy"><p>Mark Smith Jones</p></div>
	</body>
</html>


#2

Here is the CSS:

/*Add your CSS below!*/

div {
	display: inline-block;
	margin-left: 5px;
	height: 100px;
	width: 100px;
	border-radius: 100%;
	border: 2px solid black;
}
div p {
    margin-top:40px;
    position:relative;
    text-align: center;
}
.friend {
    border: 2px dashed #008000;
}
.family {
    border: 2px dashed #0000ff;
}
.enemy {
    border: 2px dashed #ff0000;
}
#best_friend {
    border: 4px solid #00c957;
}
#archnemesis {
    border: 4px solid #cc0000;
}

#3

This bit of code gets applied when you have a paragraph tag in use


#4

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