文本的边缘从带有显示的 div 溢出：内联答案

【问题标题】：the edge of text overflows from div with display : inline文本的边缘从带有显示的 div 溢出：内联
【发布时间】：2022-12-15 09:44:11
【问题描述】：

我怎样才能防止这种情况？ “f”字符的边缘从 div 中溢出。我怎样才能使它适合文本？ HTML代码：

<!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="parent" style="display: inline;  background-color: coral; font-size: 200px;">test f</div>
</body>

</html>

【问题讨论】：

我认为问题出在字母f，尝试在f之后添加一个字母，比如u，然后你可以看到没有任何溢出。为防止这种情况发生，请尝试使用另一种字体。您还可以在文本中添加一些填充

标签： html css

【解决方案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="parent" style="display: inline; padding:0 25px; background-color: coral; font-size: 200px;">test f</div>
</body>

</html>

【讨论】：