如何缩进标头？

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

使用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将全要素移位而padding将增加的内容和边框之间的空间。

看看这张图理解上的差异：

Answer 2

添加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 3

您可以试试就有一个：

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

DEMO HERE

Answer 4

使用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 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>