More positioning changes questions


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>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Social Network</title>
		<!--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>


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 {
    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;


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


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