Positioning of divisions involving image


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

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;
	text-align: center;

div p img{
    position: relative;
    height: 60px;
    width: 60px;
    margin-top: -20px;

div p{
    border: 2px dashed #008000;
    background: lavender;
    border: 2px dashed #0000FF;
    background: lavenderblush;
    border: 3px solid pink;
    border: 2px solid navy;
    border: 2px dashed #FF0000;
    border: 4px solid #00C957;
    background: papayawhip;
    border: 4px solid #CC0000;


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


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


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


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