Question

我有一个带有一些文字的div

<div class="jumbotron">
    <h1>This is a text with class jumbotron.</h1>
</div>

我无法找到一种方法来删除文本右侧的额外空格（红色箭头所在的位置）。

编辑：

我希望将文本绘制成200px的宽度需求，但是然后放置一个框以使填充也正确，如果需要使框略小于所需的那样。

结果如下代码：

enter image description here

目标：框边缘大约是红线所在的位置：

enter image description here

编辑：

text-align justify会导致正确的填充，但我想保留上面的文字：

enter image description here

完整示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<head>
<style type="text/css">
<!--
.jumbotron h1 {
      margin-right: auto;
      margin-left: auto;
      padding: 10px;
      border: 3px solid #ffffff;
      width: 200px
    }
body {
  background-color: grey;
}
-->
</style>
</head>
<body>
  <div class="jumbotron">
    <h1>This is a text with class jumbotron.</h1>
  </div>
</body>

Answer 1

使用box-sizing:border-box;

.jumbotron h1 {
      margin-right: auto;
      margin-left: auto;
      padding: 10px;
      border: 3px solid #ffffff;
      width: 200px;
      box-sizing:border-box;
    }

我希望它会对你有所帮助。

如何避免非对称填充并简单地缩小盒子？

1 个答案: