Html 如何减少白色虚线的长度，使其匹配图像和文本高度？

实际上，我已经看到了它的长度，因为.main div是父级，并且它的大小与此一致。我不知道如何调整

尝试减少虚线以匹配与文本相同的高度，我如何做到这一点

提琴来了

---

只需尝试将img的margin设置为较小的值，并将所有其余元素的margin和padding设置为0

检查这个

背景

img {
       margin: 0.1em 0;
       max-width: 100%;
       float:left;
}

将此添加到css

* { 
    margin: 0; 
    padding: 0; 
}

---

到现在为止，他已经为我做了这件事。但这一切都取决于图像的高度。设置此页边距属性后，如果图像的高度大于文本的高度，则会扩展div height，webkit行也会扩展。到目前为止，这是解决您的问题的手动解决方案，但还有许多其他方法可以实现这一点，只要尝试改变您的方法，以获得更具动态性的解决方案。

这是演示，请看一看

---

向div添加更多内容。在此之前，它不会修复。向div添加更多内容将自动完成此操作。

。main p{margin:0；}

尝试了一些运气不佳的事情！有趣的问题！JSFIDLE与发布的代码不对应，例如，它只有一个

img

标记，并且缺少图像。问题使用特定于WebKit的CSS，但问题中没有表达这一点。没有虚线，只有一条虚线规则。你的内容太少，因此它显示的虚线比文本大。添加更多内容。谢谢，我实际上看到了它的长度，因为.main div是父级，并且它的大小与此一致。我不知道如何调整。。。

img {
       margin: 0.1em 0;
       max-width: 100%;
       float:left;
}

* { 
    margin: 0; 
    padding: 0; 
}

  .newspaper
   {
      column-count:3;
      column-gap:40px;
      column-rule:4px dotted #ff00ff;

      /* Firefox */
       -moz-column-count:3;
       -moz-column-gap:40px;
       -moz-column-rule:4px dotted #ff00ff;

       /* Safari and Chrome */
       -webkit-column-count:3;
       -webkit-column-gap:40px;
       -webkit-column-rule:4px dotted #ff00ff;
       }
        img{
            width:100px;
            height:100px;
           }