如何缩进标题？

Question

我的h4标题周围有一个边框：

h4 {
  border-width: 2px;
  border-radius: 25px;
  border-color: gray;
  width: 90%;
  border-style: solid;
  padding: 5px;
}

呈现为

我想通过50px缩进整个标题（包括边框）。仅添加text-indent: 50px;缩进文本，而不是边框​​（并且border-indent显然不存在）

应该做什么才能使边框缩进（或缩进，拖动文本）？

Answer 1

use margin:

h4 {
  border-width: 2px;
  border-radius: 25px;
  border-color: gray;
  width: 90%;
  border-style: solid;
  padding: 5px;
  margin-left: 50px; /* change this as you like */
}

margin will shift the whole element while padding will increase the space between the content and the border.

Look at this picture to understand the difference:

在不同应用程序级别的页面之间导航

Answer 2

使用margin-left属性移动h4标记

的边框

查看JSFiddle

<强> CSS：

h4 {
  border-width: 2px;
  border-radius: 25px;
  border-color: gray;
  width: 90%;
  border-style: solid;
  padding: 5px;
  margin-left:20px;
}

Answer 3

将padding-left: 50px和margin-left: 50px添加到h4

h4 {
  border-width: 2px;
  border-radius: 25px;
  border-color: gray;
  width: 90%;
  border-style: solid;
  padding: 5px 5px 5px 50px; /*top, right, bottom, left*/
  margin-left: 50px;
}

填充将影响边框和内容之间的空间，而边距则是容器与最近元素之间的空间

Answer 4

你可以尝试这个：

h4 {
  border-width: 2px;
  border-radius: 25px;
  border-color: gray;
  width: 90%;
  border-style: solid;
  padding:5px;
    margin-left:50px;
}

DEMO HERE

Answer 5

添加包装器：

h4 {
  border-width: 2px;
  border-radius: 25px;
  border-color: gray;
  width: 100%;
  border-style: solid;
  padding: 5px;
}
#wrapper {
    width:90%;
    padding-left:12px
}


<div id="wrapper">
<h4>ddd</h4>
</div>