下标和常规文本 HTML 之间的水平空格答案

【问题标题】：Horizontal spaces between subscript and regular text HTML下标和常规文本 HTML 之间的水平空格
【发布时间】：2021-10-11 14:18:31
【问题描述】：

我对使用 HTML 和 CSS 非常陌生。在我主要通过复制/粘贴代码设计的网站中，当鼠标悬停在它们上方时，我有一堆带有文本的图像。这包括很多我认为可能会干扰我的分子式中的下标的 CSS，但我不确定为什么或在哪里？ subscript in lower line 我的第一个问题是子标签导致下标被放在下一行并被其他字母覆盖。我通过添加来修复：

<style>
.textwithblurredbg sub{
vertical-align: baseline; 
font-size: 60%;
position: relative;
left:-4 em;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

但是，现在我的分子式的数字和字母之间有很大的空格。任何解决此问题的解决方案将不胜感激（请保持语言尽可能简单）。先感谢您！！ subscript numbers not attached to previous text

这是我的可能有干扰的 CSS 代码：

<style>
.textwithblurredbg{
width:300px;
height:200;
display: inline-block;
margin:8px;
position:relative;
} 

.textwithblurredbg img{
width: 100%;
height: 100%;
border-radius:10px;
transition:.3s;
}

.textwithblurredbg:hover img{
filter:blur(2px) brightness(60%);
box-shadow:0 0 16px #A0C1D5;
}

.textwithblurredbg :not(img){
position:absolute;
top:10%;
z-index:1;
color: #fff;
font-family:Arial;
text-align:left;
line-height:25px;
margin:10px;
width:95%;
opacity:0;
transition;.3s;
letter-spacing:default;
}

.textwithblurredbg h3{
top:2.5%;
font-family:Arial;
text-align:center;
}


.textwithblurredbg:hover :not(img){
opacity:1;
}

以及我如何使用子标签：

<div class="textwithblurredbg">
<img src="https://groups.chem.ubc.ca/chem_stockroom/images/Acetic Acid 2.0M.jpg">
<h3>Acetic Acid Solution 2.0M</h3>
<h5>Molecular Formula: C<sub>2</sub>H<sub>4</sub>O<sub>2</sub> or CH3COOH<br><br>Formula Weight: 60.05 g/mol<br>Appearance: Colourless, clear liquid<br><br>Safety: Can cause burns/blisters if comes into contact with skin.

【问题讨论】：

标签： html css spacing subscript

【解决方案1】：

给你...

通过使用id='wrapper' 制作div 然后将所有文本元素放入其中，所有这些混乱都得到了解决。如果您将这些文本元素放在包装器之外，它们将被放置一个在另一个之上，从而造成您所描述的混乱。此外，下标不起作用。

因此，将position: relative; 设置为textwithblurredbg，将position: absolute; 设置为wrapper，然后将所有文本元素放入wrapper。因此：

您的文本元素现在一个接一个（而不是一个接一个）并且
下标现在可以使用了。

另外，我稍微简化了你的 CSS。

.textwithblurredbg {
  position: relative;
  width: 300px;
  margin: 8px;
}

.textwithblurredbg img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transition: 0.3s;
}

#wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  padding: 25px;
  color: white;
  transition: 0.3s;
  opacity: 0;
}

.textwithblurredbg:hover img {
  filter: blur(2px) brightness(60%);
  box-shadow: 0 0 16px #A0C1D5;
}

.textwithblurredbg:hover #wrapper {
  opacity: 1;
}

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>

</head>

<body>

  <div class='textwithblurredbg'>
    <img src='https://groups.chem.ubc.ca/chem_stockroom/images/Acetic Acid 2.0M.jpg'>
    <div id='wrapper'>
      <h3>Acetic Acid Solution 2.0M</h3>
      <h5>Molecular Formula: C<sub>2</sub>H<sub>4</sub>O<sub>2</sub> or CH<sub>3</sub>COOH</h5>
      <h5>Formula Weight: 60.05 g/mol<br>Appearance: Colourless, clear liquid<br><br>Safety: Can cause burns/blisters if comes into contact with skin.</h5>
    </div>
  </div>

</body>

</html>

【讨论】：

非常感谢您的帮助，完美解决了我的问题！