如何移动p标签？padding属性设置无效问题求助

我看了你的代码，问题出在对padding-right的作用理解上——它是给p标签的内部内容添加右侧内边距，而不是移动p标签这个元素本身。因为p标签默认是块级元素，宽度会占满父容器（.P1）的100%，所以设置padding-right: 100px只会让文字内容向左缩进，视觉上可能没达到你“移动p标签”的预期效果。

下面给你几个针对性的解决方案，根据你想要的效果选择：

1. 调整p标签整体位置（比如居中、靠右） #

如果你想让p标签在.P1里整体移动位置，比如居中显示，或者靠右对齐，可以用以下方法：

方法A：使用margin控制位置 #

给p标签设置margin，让它在父容器里偏移：

.P1 p {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  font-size: 2rem;
  /* 让p标签向右移动50px，同时上下margin保持0 */
  margin: 0 0 0 50px;
  /* 如果想让p标签靠右对齐，用这个： */
  /* margin-left: auto; */
  /* 如果想让p标签居中，用这个： */
  /* margin: 0 auto; */
}

方法B：通过父容器的text-align控制 #

先把p标签改成行内块元素（避免占满父容器宽度），然后给父容器.P1设置text-align：

.P1 {
  border: 1px solid green;
  margin-left: 10%;
  height: 80%;
  width: 30%;
  /* 让内部行内/行内块元素居中 */
  text-align: center;
}
.P1 p {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  font-size: 2rem;
  /* 让p标签宽度适应内容 */
  display: inline-block;
}

2. 调整p标签内部文字的位置 #

如果你确实是想让p标签里的文字内容偏移，只是之前的效果不明显，可以给p标签设置固定宽度，这样padding的效果会更直观：

.P1 p {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  font-size: 2rem;
  padding-right: 100px;
  /* 设置固定宽度，让padding的缩进效果显现 */
  width: 100%;
  box-sizing: border-box; /* 确保padding不会超出父容器 */
}

额外优化建议 #

你的代码里用了负margin（比如.P2的margin-top: -27.3%）来布局，这种方式容易出现兼容性问题，建议改用Flexbox布局来实现左右分栏，会更稳定：

.container {
  border: 1px solid black;
  margin-top: 10%;
  height: 28rem;
  /* 使用Flex布局让两个P容器并排 */
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.P1, .P2 {
  border: 1px solid green;
  height: 80%;
  width: 30%;
  /* 去掉原来的margin-left和负margin */
  margin: 0;
}

这样就不需要用负margin来调整.P2的位置，布局会更健壮。

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