给p元素添加border后边框延伸至最右侧的问题求助

问题原因 #

<p> 标签属于原生块级元素，默认宽度为父容器的100%。你给元素设置的 left: 240px 只是调整了元素的偏移显示位置，并没有改变元素本身的宽度属性，所以元素宽度还是和你给body设置的480px保持一致，边框自然会延伸到页面最右侧。

解决方法 #

有两种常用的解决方案，按需选择即可：

• 方案1：把p元素设置为行内块元素，宽度自动适配内容大小，不会占满整行
  给目标p元素的CSS样式添加 display: inline-block 属性即可，示例如下：

  .dinnars {
    border: 15px solid darkorchid;
    position: relative;
    top: 150px;
    left: 240px;
    border-radius: 4px;
    display: inline-block; /* 新增这行 */
  }
  

• 方案2：设置宽度自动适配内容
  给目标p元素的CSS样式添加 width: fit-content 属性，同样可以实现宽度仅包裹内容的效果：

  .dinnars {
    border: 15px solid darkorchid;
    position: relative;
    top: 150px;
    left: 240px;
    border-radius: 4px;
    width: fit-content; /* 新增这行 */
  }
  

如果需要给两个p标签都添加边框，把对应属性同步给#pounds的样式即可。

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