The border goes all the way to the right-CodePudding

So I made a a calculator to change kilogram to pound and I was going to add a border to a pelement but the bordergoes all the way to the right So here is the 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>

And here is the 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;
}

CodePudding user response：

Add width: min-content; to your .dinnars class. I would also delete the top and bottom attributes. They are unnecessarily restricting your sizing.

Also, get rid of the top left attributes.

*{
  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>

CodePudding user response：

The p-element is in relative position with the element that has a class .dinners at right, so applying border on the p-element will make the right hand border look bigger because of the of relative element that already has it's own border that look like it's merging with the one at the Left because of there is no space between the two. Also note that the box-sizing property affects the way properties are applied on elements. Maybe try using box-sizing: border-box.