luiyezheng luiyezheng - 1 year ago 138
CSS Question

When will child element affect the position of parent element?

I put a

element into a
element. I suppose the
just to be there, but it changed the position of the

A simplified structure of my HTML:

<div class="box" id="box6">
<img src="circle-shape-outline.svg">


And the CSS: {
display: inline-block;
margin: 0px;
border: 2px solid #364F6B;
border-top: none;
border-left: none;

width: 32.9%;
height: 33%;

div#box6 {
border-right: none;


enter image description here

How can I fix it? You can have a look at the complete code on codePen Thanks

Answer Source

Your <div>s have display: inline-block so when you add an <img> it tries to adjust the image to the bottom of current row.

You can set float: left on the image or set position: relative on #box6 and then position: absolute on <img> to position in wherever you want inside the div.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download