Question

我的HTML代码看起来像

<div class="div1">
    <span class="sp1"></span>
    <span class="sp2"></span>
    <img class="img1" src="sss.png">
    <a class="a1" href="test.aspx">aaaa</a>
    </img>
</div>

代码中还包含几个没有图像的框，css是否可以填充包含img标记的框

喜欢这个css

.div1 > img {
    padding: 1px 0px 5px 0 !important;
    margin: 0;
}

但是这个css填充了图像，我想填充div

Answer 1

你可以为所有包含图像的div提供一个公共类名，并仅通过.imageContainer类来填充div

像这样

.imageContainer{
    padding: 1px 0px 5px 0;
    margin: 0;
}

Answer 2

我不相信CSS2 / 3只能用CSS4这是可能的，即必须通过Javascript完成。见Is there a CSS parent selector?

Answer 3

你好

我不确定你的确切要求。如果你问：我可以直接将“填充”添加到img-tag中吗。如果你的意思是：我可以将填充放到div标签上，这样图像就不会粘贴在div的左侧，而是在div的“边框”和图像之间有一些空间 - 是的。

1）div1的所有内容“应该有填充”：您可以将padding属性写入div的类：

的CSS：

.div1{
      background-color:cyan;
      padding:5px;
}

HMTL：

<div class="div1">
    <span class="sp1">some text</span>
    <img class="img1" src="./DSCF1556.png">
    <a class="a1" href="test.aspx">aaaa</a>
    </img>
</div>

如果您使用上述内容，图片和文字将距离div的左侧和顶部5px。

2）只有图片“应该有填充”，包含在新行中：如果您只想让图像具有此空间，则可以在图像标记周围添加div。因为它是一个div，所以图像将以新的一行显示。

的CSS：

 .padd{
            background-color:cyan;
            padding:5px;
        }

HTML：

<div class="div1">
    <span class="sp1">some text</span>
    <div class="padd">
        <img class="img1" src="./DSCF1556.png">
    <a class="a1" href="test.aspx">aaaa</a>
    </img>
    </div>
</div>

在该示例中，仅从左侧和顶部显示图像5px。

3）只有图片“应该有填充”，没有新行：如果你想让图像在文本的同一行上，然后在图像标记周围添加一个类，并在span标记中添加一个类。

希望这会有所帮助。梅鲁

Answer 4

如果我正确理解了您的问题，您希望图像在存在时具有“间距”顶部和底部。

保证金不能解决您的问题吗？

.div1 img{
    margin: 10px 0 5px 0;
}

当图像不存在时，将没有边距。

通过css选择填充div与图像

4 个答案: