边界一直向右延伸

Question

所以我做了一个计算器来将千克换成磅，我打算给 p 元素添加边框，但是 border 一直向右所以这里是 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">

  <title>HTML</title>
  
  <!-- HTML -->
  

  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
    <p id="pounds">0</p>
   <p id="dinnars" class="dinnars">0</p>
  <script src="main.js"></script>
</body>
</html>

这里是 css

*{
  padding: 0%;
  margin: 0%;
  box-sizing: inherit;
}


body {
    font-size: 15pt;
    width: 480px;
    height: 500px;
    box-sizing: border-box;
}
#kilograms {
  position: relative;
  top: 70px;
  left: 140px;
  border: 20px solid crimson;
  border-radius: 4px;
}
#pounds {
  position: relative;
  top: 100px;
  left: 240px;
}
.dinnars {
  border: 15px solid darkorchid;
  position: relative;
  top: 150px;
  left: 240px;
  border-radius: 4px;
}

Answer 1

添加宽度：最小内容；到您的 .dinnars class。我还会删除顶部和底部属性。他们不必要地限制了您的尺码。

此外，去掉左上角的属性。

*{
  padding: 0;
  margin: 0;
  box-sizing: inherit;
  box-sizing: border-box;
}


body {
    font-size: 15pt;
    // width: 480px;
    // height: 500px;
}

#kilograms {
  position: relative;
  // top: 70px;
  // left: 140p;
  border: 20px solid crimson;
  border-radius: 4px;
}
#pounds {
  position: relative;
  // top: 100px;
  // left: 240px;
}
.dinnars {
  border: 15px solid darkorchid;
  width: min-content;
  position: relative;
  // top: 150px;
  // left: 240px;
  border-radius: 4px;
}

.box{
  border:2px dotted green;
  width: 500px;
  height 500px;
}

<div class='box'>
  <input type="number" placeholder="Type Weight In Kilograms" id="kilograms">
  <p id="pounds">0</p>
  <p id="dinnars" class="dinnars">0</p>
</div>

Answer 2

p 元素与右侧具有 class.dinners 的元素处于相对位置，因此在 p 元素上应用边框将使右侧边框看起来更大，因为相对已经拥有自己的边框的元素看起来像是与左侧的边框合并，因为两者之间没有 space。另请注意，box-sizing 属性会影响属性应用于元素的方式。也许尝试使用 box-sizing: border-box.

边界一直向右延伸

The border goes all the way to the right

html

css

border