javascript - 如何修复溢出的文本

Question

我有一个奇怪的事情，在我从脚本函数中的原始文本更新后，div 中的文本低于它。下面的示例（“Hello World”是默认值，“test”是更新后的文本）

CSS

#footer {
  height: 50px;
  left: 0px;
  top: 800px;
  background: rgb(40, 40, 40);
  border-radius: 0px 10px 10px 0px;
  padding: 0px 15px;
  font-size: 40px;
  position: absolute;
  overflow: visible;
  color: #ac962a;
  -webkit-box-shadow: 0px 10px 10px #383838;
  box-shadow: 0px 5px 10px #383838;
}

HTML

<div id="footer">
  <span id="botEvent">Hello World</span>
</div>

botEventid 是我正在更新的内容，更新后文本位于原始背景框下方。

任何帮助表示赞赏，提前谢谢你，祝你有美好的一天:)

标签： javascripthtmlcss

Answer 1

您还有其他导致问题的原因吗？如果您使用 ap 标签，请将边距和内边距设置为 0

document.getElementById('botEvent').textContent = 'TEST';

#footer {
  height: 50px;
  left: 0px;
  top: 20px;
  background: rgb(40, 40, 40);
  border-radius: 0px 10px 10px 0px;
  padding: 0px 15px;
  font-size: 40px;
  position: absolute;
  overflow: visible;
  color: #ac962a;
  -webkit-box-shadow: 0px 10px 10px #383838;
  box-shadow: 0px 5px 10px #383838;
}

p{
margin:0;
padding:0;
}

<div id="footer">
  <p id="botEvent">Hello World</p>
</div>