Css 如何在输入文本时消除div元素底部的空白
我有一个空白的HTML页面，我想对齐2个元素…垂直和水平。这些元素是一个Css 如何在输入文本时消除div元素底部的空白,css,html,Css,Html,我有一个空白的HTML页面，我想对齐2个元素…垂直和水平。这些元素是一个标记，一个文本标记，以及两个包含这些元素的标记 当我调整窗口大小时，我不希望浏览器切断这些元素。经过无数个小时的尝试，搜索Stack和其他各种网站…我很接近，但我永远无法100%地得到我想要的 文本附近带边框的第二个div的底部和行驶侧有一个空白，罪魁祸首似乎是。当我去掉标签时，空白就消失了。但是，我想在图像下的文字，所以我需要它 空白让我怀疑内容是否放在中心。我怎样才能摆脱它 HTML 我又试了一次，希望这能帮你解决问
我又试了一次，希望这能帮你解决问题。你听起来很绝望。
*{
边界：0；
保证金：0；
保证金：0；
}
.集装箱{
字号：0；
}
.货柜跨度{
字体大小：35px；
背景#ff8ea1；
填充：0；
保证金：0；
}
.集装箱跨度号空间{
显示：内联块；
垂直对齐：顶部；
高度：.75em；
线高：.75em；
}
在建工程
在建工程
正文
{
保证金：0；
背景色：海绿；
}
img{
显示：块；
保证金：自动；
宽度：50%；
}
/*添加此css以删除文本下的空白*/
P
{
保证金底部：-9px！重要；
}
#容器
{
位置：相对位置；
身高：100%；
宽度：100%；
最小宽度：400px；
}
#内容
{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
外形：3倍纯红；
利润上限：200px；
填充顶部：10px；
}
#内容p
{
保证金：0；
文本对齐：居中；
字体系列：信使；
字体大小：48px；
空白：nowrap；
颜色：春绿色；
}
正在施工中
spanbr<body>
<div id="container">
<div id="content">
<p>
<a href="index.html"><img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction"></a>
<span>UNDER CONSTRUCTION!</span>
</p>
</div>
</div>
</body>
位置#container
{
/*position:relative;*/ /* Removed */
height:100%;
width:100%;
min-width:400px;
}
#内容#content这是更新的而不是方框。那个盒子是个占位符哈哈。我应该把它弄清楚哪一个？我看不到空白？我已经有
边距：0，但添加填充：0对我的
也没有帮助…您没有填充：0px；我知道我没有把padding属性添加到我的帖子中，但我确实把它添加到了我电脑上的代码中，并亲自测试了它。不幸的是，它仍然没有成功。您能在图像中识别出要删除的空白吗？或者显示一张你喜欢的页面的图片。当然可以。我再加上一张图片。我很感激你的回答。我在不同的浏览器中得到不同的结果，因此我无法真正检查任何人的答案…是否可以不使用像.8
这样的任意数字来进行检查。我很好奇是什么原因首先导致了空白。即使在div的右内侧靠近文本的地方也有空白……我不知道为什么要让我的元素在div中均匀分布，并且在所有边上都有相等的空白，同时在html页面中保持中心对齐，会如此困难。我已经在电脑前坐了好几个小时试图弄明白这一点…行高
用于行距。您可以删除它，它将行高设置为1（或100%）。我将其设置为0.8（或80%），因为您的文本是大写的，所以您不需要在文本底部为字母“g”、“p”、“q”分配空间。感叹号后面有一些空白，因为您使用的是固定宽度字体（即Courier）。因此您的感叹号将占据与“A”或“W”相同的宽度。尝试将您的字体更改为没有固定宽度的字体，如Arial。CSSline height
属性不会真正解决任何问题。@FrankFajardo也感谢您的解释。我真的没有考虑过单空格。在边距底部：-9px
中，如果不使用像-9px
这样的任意数字，是否可以这样做。我很好奇是什么原因首先导致了空白。即使在div的右内侧靠近文本的地方也有空白……我不知道为什么要让我的元素在div中均匀分布，并且在所有边上都有相等的空白，同时在html页面中保持中心对齐，会如此困难。我已经在电脑前坐了好几个小时试图弄明白这个问题…@PrimRock是的，你可以将margin bottom的值更改为任何数字。但对你来说，这是最适合你的情况的。CSS边距底部属性用于生成（如果其值在+ve中）或删除（如果其值在-ve中）元素周围的空格#content p
下的code>。您可以通过将字体系列更改为另一个字体系列（例如字体系列：无衬线字体）来删除右侧的空白；或者干脆删除这个属性。谢谢你
<body>
<div id="container">
<div id="content">
<p>
<a href="index.html"><img src="http://www.iconsdb.com/icons/preview/blue/square-xxl.png" alt="Under Construction"></a>
<span>UNDER CONSTRUCTION!</span>
</p>
</div>
</div>
</body>
#content span {
display: block;
margin: 0;
line-height: .8;
}
#container
{
/*position:relative;*/ /* Removed */
height:100%;
width:100%;
min-width:400px;
}
#content
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*outline:3px solid red;*/
border: 3px solid red;
}