相关疑难解决方法(0)
为什么<img>和其他元素之间有一个讨厌的小空间？
如果a <div>或任何其他元素跟随a <img>,则它们之间会出现~3px的空格 - 即使margins它们为零.
<img src="example-fractal-art.png">
<div>What is with that gap?<div>
这是一些CSS的样子.
现在很容易display: block进入CSS并解决问题.但为什么会这样呢？没有计算的边距,填充,边框或类似的东西.
浏览器在做什么？有人甚至称它为"神奇".
推荐指数
解决办法
查看次数
桌子内的图像下总是有一点空间
我会为希望看到它的人提供直接链接.
只需悬停其中一个表格列表,您就会发现图像下面总是有一个小空间.我已经尝试了填充,边距,搜索stackoverflow,并使用边框间距,边框折叠等但到目前为止没有任何帮助.
我想要你的帮助.有什么问题,我错过了什么？
推荐指数
解决办法
查看次数
为什么svg的包含div占用更多空间
这个简单的html:
<div style="background:blue">
<svg width="40" height="40" style="background:red"></svg> some text
</div>你可以看到svg是,40px但周围的div 44px很高(在chrome上测试).
为什么.如何使周围的div尊重SVG的大小而不height在周围的div上显式并将布局保持在svg+text一行中？
推荐指数
解决办法
查看次数
<img>标签下的空格
我没有理由在我的照片下面有这个烦人的空间.我正在使用www.getskeleton.com作为框架.
HTML代码
<div class="four columns bottom">
<div class="box">
<img src="images/picture.png" title="" alt="">
</div>
</div>
CSS代码
.box{
border: 1px solid #bfbfbf; /* ---- Border OUTSIDE*/
}
推荐指数
解决办法
查看次数
将两个<p>元素对齐在同一行中
这是演示.
我想将两个<p>元素对齐在同一行,但你可以看到第二个元素向下移动了一点.谁知道原因？
HTML
<div class="logo">
<p>Hello world</p>
<p class="web_address">Hello all</p>
</div>
CSS
.logo p {
margin:0;
padding:0;
border: solid 1px black;
margin-left: 20px;
font-size: 36px;
display: inline-block;
line-height: 80px;
}
推荐指数
解决办法
查看次数
CSS - 图像边框中奇怪的空白
我有两个图像，我给了边框（1px 纯黑色），但在我的浏览器中，它们用奇怪的空白呈现 - 有点像非自愿填充。
空白仅在一侧，但根据缩放它可以改变边框的一侧（例如突然“伪填充”不再在右侧，而是在顶部），甚至在两侧同时。
.img img {
width: 100%;
vertical-align: middle;
display: block;
border: 1px solid black;
}<section class="imgrid">
<div class="img">
<img src="http://via.placeholder.com/500x500" />
</div>
<div class="img">
<img src="http://via.placeholder.com/500x500" />
</div>
</section>这就是相关代码方面的内容。图像是 500 像素的正方形（所以是 500x500）。
编辑：这与此处建议的“类似问题”无关。在创建这个问题之前，我已经尝试过垂直对齐。我在代码段中添加了 width: 100% 和 vertical-align: middle 来说明这一点。
问题是这样的：
推荐指数
解决办法
查看次数
为什么CSS Grid布局会在单元格之间增加额外的间隙？
无法弄清楚为什么CSS网格布局会为垂直单元格周围的内容添加不必要的额外空间,尽管边距和填充被清零:
.grid {
display: grid;
grid-template-columns: 13fr 11fr 4fr 20fr;
grid-auto-rows: 12fr;
grid-gap: 4px;
align-items: center;
}
.grid figure {
outline: 1px solid red;
margin: 0;
padding: 0;
}
.grid figure img {
margin: 0;
padding: 0;
width: 100%;
display: block;
}
.grid .gi13x12 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 13;
}
.grid .gi11x6.one {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 7;
}
.grid .gi11x6.two {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 7;
grid-row-end: 13;
}
.grid .gi4x4.one …推荐指数
解决办法
查看次数
span 应该有子 img 的宽度和高度
我目前遇到一个问题，我首先认为这是微不足道的（可能是），但我不知道如何完成此任务。我有一个span，它只是图像的包装器，并且span实际上应该具有子元素的width和。height默认情况下，宽度很好，但高度与span图像的高度不匹配。如果我将其更改为block，高度就可以了，但宽度为 100%（这有点符合预期，因为它是一个block元素）。子图像的宽度和高度未知。
编辑：
我实际上尝试过inline-block，但它没有按预期工作。我在下面的代码片段中为此添加了一个切换开关，请尝试一下。
$('#toggleInline').click(function() {
$('#removed').removeAttr("style");
});
$('#toggleBlock').click(function() {
$('#removed').removeAttr("style");
$('#removed').css('display', "block");
});
$('#toggleInlineBlock').click(function() {
$('#removed').removeAttr("style");
$('#removed').css('display', "inline-block");
});img {
/* just because the sample image is too large */
width: 50%;
}
span.removed {
border: 3px solid #f00;
background: repeating-linear-gradient(
45deg,
#f00,
#f00 10px,
#fff 10px,
#fff 20px
);
}
span.removed img {
opacity: 0.85;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span …推荐指数
解决办法
查看次数
图片元素的高度比img大
为什么图片元素比图像元素大？（示例底部的红线）- chrome 88。我怎样才能防止这种情况发生？
picture{
background-color: red;
}
img{
width:100%;
height: auto;
}<picture>
<source srcset="https://i.stack.imgur.com/WeyM8.jpg" media="all">
<img src="">
</picture>推荐指数
解决办法
查看次数
仅 CSS 的方形 div 适合矩形 div
我已经确定了如何根据宽度设置 div 高度（使用百分比宽度和填充底部）。但我还需要能够根据其高度设置 div 宽度。我曾尝试使用 vw/vm/vh 单位，但这些是相对于视口而不是容器。
所以，在下面的例子中
<body>
<div class="rectangle">
<div class="square">
</div>
</div>
</body>
这是一些仅适用于纵向的非工作 CSS：
.rectangle {
background-color:red;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
.square {
background-color:blue;
width:100%;
padding-bottom:100%;
}
我希望 .rectangle 填充其容器，这意味着随着窗口大小的变化，.rectangle 可能会从横向布局变为纵向布局。发生这种情况时，我希望 .square div 在不丢失其方形的情况下尽可能地填充。
因此，如果浏览器窗口的宽度大于高度（横向），则 .rectangle 应填充窗口，并且 .square 应与矩形的高度一样高，与矩形的高度一样宽。
如果浏览器窗口的高度大于宽度（纵向），则 .rectangle 应填充窗口，并且 .square 应与矩形的宽度一样宽，与矩形的宽度一样高。
所以，我可以使用媒体查询在横向和纵向之间交换样式，并且我有纵向案例的解决方案，但我还没有找到横向案例的解决方案。如何让正方形填充其父级的高度，并限制其宽度以保持正方形的纵横比？
推荐指数
解决办法
查看次数