如何使用HTML和CSS实现文本S在矩形框内、Fox.在框外的布局？

原代码有几个问题导致效果不符合预期：

• div是块级元素，默认独占一行，导致"Fox."被挤到方框下方
• h1标签自带默认外边距和超大字体，打乱了方框内的布局
• HTML标签未闭合（p标签缺失结束标签），结构不规范

用下面的代码就能实现你要的效果：

CSS 代码 #

/* 方框样式 */
.box {
  display: inline-block; /* 让方框和后面的文字在同一行 */
  width: 30px; /* 调整宽度适配文字 */
  height: 60px; /* 调整高度让文字居中 */
  border: 5px solid black;
  text-align: center; /* 让S水平居中 */
  line-height: 60px; /* 让S垂直居中 */
  margin-right: 8px; /* 和Fox之间留一点间距 */
}

/* 重置默认样式，避免布局干扰 */
h1, p {
  margin: 0;
  display: inline-block;
  vertical-align: middle; /* 和方框垂直对齐 */
}

HTML 代码 #

<html>
<head>
  <style>
    /* 把上面的CSS代码放在这里 */
  </style>
</head>
<body>
  <div class="box"><h1>S</h1></div>
  <p><h1>Fox.</h1></p>
</body>
</html>

关键修改说明： #

• 给div添加display: inline-block，让它和后续文字处于同一行
• 用line-height和text-align实现方框内"S"的水平垂直居中
• 重置h1和p的默认外边距，设置为inline-block并垂直对齐，保证整体排版整齐
• 调整方框宽高，让它更贴合文字显示

内容的提问来源于stack exchange，提问作者Shinesfox