gpt4 book ai didi

html - 如何避免非对称填充并简单地将框缩小一点?

转载 作者:太空宇宙 更新时间:2023-11-04 12:03:21 26 4
gpt4 key购买 nike

我有一个带有一些文本的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>

最佳答案

使用 box-sizing:border-box;

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

希望对你有帮助。

关于html - 如何避免非对称填充并简单地将框缩小一点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29578823/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com