子元素何时会影响父元素的位置？

Question

我将<img>元素放入<div>元素中。我认为<img>就在那里，但它改变了<div>元素的位置。

我的HTML的简化结构：

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

</div>

CSS：

div.box {
    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;
}

截图：

我该如何解决？您可以查看codePen感谢

上的完整代码

Answer 1

您的<div>有display: inline-block所以当您添加<img>时，它会尝试将图片调整到当前行的底部。

您可以在图片上设置float: left或在position: relative上设置#box6，然后在position: absolute设置<img>，以便在div中的任意位置设置。

Answer 2

为您的图片元素添加display:block;样式。对齐center使用margin:0 auto。它会工作。 这是输出

Fiddle

Answer 3

在我看来，你的图像边框正在移动并增加div的大小。我会尝试使用图像源后的拉伸命令将图像的大小设置为您的框的大小。