如何移动 p 标签？答案

【问题标题】：How do i move p tag?如何移动 p 标签？
【发布时间】：2021-10-21 04:09:11
【问题描述】：

我无法移动我的 p 标签。我尝试了填充，但它不起作用。

这里是代码。您可以在P1 类的div 中找到p 标签。

* {
  box-sizing: border-box;
}

body {
  background-color: #FFB7C5;
  margin: 0;
}

.top-heading {
  height: 70px;
  font-family: 'Bebas Neue', cursive;
  padding: auto;
  margin: auto;
  width: 30%;
  font-size: 2rem
}

.top-heading h1 {
  text-align: center;
}

.container {
  border: 1px solid black;
  margin-top: 10%;
  height: 28rem;
}

.P1 {
  border: 1px solid green;
  margin-left: 10%;
  height: 80%;
  width: 30%;
}

.P1 p {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  font-size: 2rem;
  padding-right: 100px;
}

.P2 {
  border: 1px solid green;
  margin-top: -27.3%;
  margin-left: 60%;
  height: 80%;
  width: 30%;
}

.dice {
  /* border:1px solid red; */
  border-radius: 20px;
  height: 65%;
  width: 65%;
  margin: 50px auto;
  background-color: #09585d;
}

.circle {
  display: inline-block;
  border-radius: 50%;
  background-color: honeydew;
  height: 20%;
  width: 20%;
  margin: 30px 50px;
}

.c2 {
  float: right;
  margin-top: -80px;
}

.c3 {
  margin-top: -15px;
}

.c4 {
  float: right;
  margin-top: -79px;
}

.c5 {
  margin-top: -13px;
}

.c6 {
  float: right;
  margin-top: -81px;
}

.P2 p {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  font-size: 2rem;
  padding-right: 100px;
}

.p2c2 {
  float: right;
  margin-top: -218px;
}

.p2c4 {
  float: right;
  margin-top: -149px;
}

<!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.0">
  <title>My Website</title>

  <!-- GOOGLE FONTS -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
  <!-- STYLESHEET -->
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="top-heading">
    <h1>Refresh Me</h1>
  </div>
  <div class="container">

    <div class="P1">
      <p>Player 1</p>

      <div class="dice">

        <div class="circle"></div>
        <div class="circle c2"></div>
        <div class="circle c3"></div>
        <div class="circle c4"></div>
        <div class="circle c5"></div>
        <div class="circle c6"></div>

      </div>
    </div>

    <div class="P2">
      <p>Player 2</p>
      <div class="dice">

        <div class="circle"></div>
        <div class="circle p2c2"></div>
        <div class="circle c3"></div>
        <div class="circle p2c4"></div>
        <div class="circle c5"></div>
        <div class="circle c6"></div>

      </div>
    </div>
  </div>

</body>

</html>

在上面的sn-p中可以看到p标签的属性。

虽然我加了padding-right，但它还是不动。

【问题讨论】：

标签： html css padding margin paragraph

【解决方案1】：

您正在使用 padding-right 并且 p 标签从右侧获取填充！并且您的 P1 类有 30% 的宽度，并且您无法从右侧看到填充。如果你给它 padding-right 1000px 或更小的 P1 类的宽度，你可以看到变化但我认为你想从左侧填充它:) 所以你应该使用 padding-left

【讨论】：