While working on a coding project at Codecademy.com, I encountered an interesting issue. I had created several circle containers using <div> tags, which all lined up perfectly in a row when they were empty. However, when I inserted images into some of the containers, it did not affect the spacing at all. But as soon as I added text within a <p> tag inside one of the containers, the entire container shifted down by half an inch.
This raised a question in my mind - why does this happen and how can it be prevented? I am more interested in understanding the reason behind this behavior rather than just finding a quick fix. Thank you for any insights you can provide.
Below is the code snippet:
div {
display: inline-block;
margin-left: 5px;
border-radius: 100%;
height: 100px;
width: 100px;
border: 2px solid black;
}
.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;
}
img {
border-radius: 100%;
height: 100px;
width: 100px;
}
div p {
text-align: center;
border: 0;
padding: 0;
}<!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">
<img src="http://www.smashbros.com/images/og/link.jpg" />
</div>
<div class="friend">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/9e/Navi_oOot.png" />
</div>
<div class="family">
<img src="http://fc07.deviantart.net/fs70/i/2011/196/c/a/deku_tree_manip_by_thegeminisage-d3u262q.jpg" />
</div>
<div class="family">
<br>
<p>Forest elf guy number 7</p>
</div>
<div class="enemy" id="archnemesis">
<img src="#" />
</div>
<div class="enemy">
<img src="#" />
</div>
</body>
</html>