Positioning of divisions involving image


#1


Everything works fine until I add an image to the last division. The last division/circle is lifted up. I thought it has something to do with the margin-top or space above that division. But when the div {display: inline-block; ... } is changed to outline-block, everything works fine with normal spacing.

Would anyone please help solving this? Thanks!


<!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" id="best_friend"><p>SALAD</p></div>
		<div class="friend"><p>DAVID</p></div>
		<div class="family"><p>MUM</p></div>
		<div class="family"><p>DAD</p></div>
		<div class="pet"><p>none</p></div>
		<div class="colleague"><p>STEPHY</p></div>
		<div class="enemy" id="archnemesis"><p><img src="https://tse2.mm.bing.net/th?id=OIP.Md25a6d60ba3a0e5e833444cc168346e7H0&pid=15.1&P=0&w=300&h=300"/></p></div>
	</body>
</html>

Below is the CSS.

div {
	display: inline-block;
	margin-left: 10px;
	margin-top: 20px;
	height: 100px;
	width: 100px;
	border-radius: 100%;
	border: 2px solid black;
	font-family: Courier;
	font-size:18px;
	text-align: center;
}

div p img{
    position: relative;
    height: 60px;
    width: 60px;
    border-radius:100%;
    margin-top: -20px;
    }

div p{
    margin-top:40px;
    }
   
.friend{
    border: 2px dashed #008000;
    background: lavender;
    }
.family{
    border: 2px dashed #0000FF;
    background: lavenderblush;
    }
.pet{
    border: 3px solid pink;
    } 
.colleague{
    border: 2px solid navy;
    }
.enemy{
    border: 2px dashed #FF0000;
    }
    
#best_friend{
    border: 4px solid #00C957;
    background: papayawhip;
    }
#archnemesis{
    border: 4px solid #CC0000;
    }


#2

display: inline-block is a tricky thing to work with. because they are not all of equal content, you get this "shift", you could use float: left; instead of display: inline-block to solve the problem

or you could give all elements an image


#3

It's great to have you guys here helping us. Thank you so much!


#4

you can even have image and text, i put the code in a bin, i made the image absolute, this will prevent shift even with display: inline-block

ultimately, there are many options, do ask if you have questions about something


#5

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