如何在不更改文本的情况下缩进边框的两边

Question

我有一个边框：

​

.box {
  width: 100%;
  height: 100%;
  padding: 10px;
  border: 2px ridge white;
  border: 2px ridge rgb(50, 50, 50);
  border-radius: 1em;
  /*8px*/
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 5%;
  padding-bottom: 5%;
}

<div class="box">Hello World!</div>

​

如果我将宽度更改为较小的百分比(例如宽度: 90%)，则右侧边沿向左移动，但左侧边沿不会移动，文本边距也会移动。我希望两边都移动--左边的边沿应该和右边的边沿向右移动一样的量--我不想让方框中的文字边距移动。

我怎么才能像我描述的那样用一个边框来做呢？

Answer 1

我想我不太了解你，但这里有两种解决办法。

解决方案1:

您可以使用margin，但是有来指定宽度。

​

.box {
  width: 50%; /** setting a width is required **/
  margin: auto;
  border: 2px ridge rgb(50, 50, 50);
  border-radius: 1em;
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 5%;
  padding-bottom: 5%;
}

<div class="box">Hello World!</div>

​

解决方案2:

您可以借助transform函数使用translate3d属性。您不必指定宽度。例如，可以将display声明为inline-block，将宽度设置为内容的原始宽度。

您可以只使用translateX函数而不是translate3d，它的工作方式应该是相同的。另外，设置一个width也会产生同样的结果。

​

.box {
  /** no width is specified but you can set one **/
  display: inline-block; /** the width now equals the content width **/
  position: relative; /** required to use left property **/
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  border: 2px ridge rgb(50, 50, 50);
  border-radius: 1em;
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 5%;
  padding-bottom: 5%;
}

<div class="box">Hello World!</div>

​

希望我把你推得更远了。

Answer 2

如果您缩小宽度10%，只需添加页边距左:5%；比这更好的是：

.box {
     position:absolute;
     width: 90%;
     left:50%; 
     margin-left:-45%; /*this must be always 1/2 of the width and negative*/ 
     height: 100%; 
     padding: 10px; 
     border: 2px ridge white; 
     border: 2px ridge rgb(50, 50, 50);
     border-radius: 1em; 
    /*8px*/ padding-left: 15%; 
    padding-right: 15%; 
    padding-top: 5%; 
    padding-bottom: 5%; 
 }

这样，div将始终相对于它的父元素居中。希望能帮上忙。

Answer 3

我尝试将margin: 0 auto;设置为.box类，就像lucifer63说的那样，它适用于相等的外部边框。以及如何不希望文本框中的页边距不移动，设置修复填充如何padding: 32px。您还可以使用display: flex; align-itens: center; justify-content: flex-start;并将高度设置为.box