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

Question

我对使用 HTML 和 CSS 还很陌生。在我主要通过 copying/pasting 代码设计的网站中，我有一堆图像，当您的鼠标悬停在它们上方时，文本会显示在顶部。这包括很多 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.

Answer 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>

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

Horizontal spaces between subscript and regular text HTML

html

css

spacing

subscript