Question

这经常让我烦恼如果您创建<div>并设置边框样式（例如，border-radius: 3px;），则文本几乎位于边框顶部，这看起来非常糟糕。
我能想出的唯一解决方案是将该div的内容包装在另一个div中，并将包装div±3px向右移动。这会产生很多额外的标记，并且它在某种程度上感觉不对，就好像有一个更好的解决方案。

所以这是我的问题：
是否可以将div的内容向上移动三个像素，如上所述仅使用css？

当然我想要一个跨浏览器的解决方案，但是我不介意每个浏览器使用1个css规则，我可以把它放在样式表底部的某个地方而不再看它，这样就不会复杂化标记。

Answer 1

padding-left:3px;

将其添加到包含文本的div中。

详细了解填充：http://www.w3schools.com/css/css_padding.asp

Answer 2

很简单，您可以使用padding: 0 3px;（仅限水平填充），padding-left: 3px; ..

http://jsfiddle.net/Kyle_Sevenoaks/D3BSL/4/

Answer 3

我希望你看起来像这样： - http://tinkerbin.com/q4cVJ0FF

<强> HTML

<div>stack</div>

<强> CSS

div {
background:red;
border-radius:3px;
    padding-left:3px;
}

您可以通过padding轻松获得所需的内容，并且可以调整所有四边的填充left,right,top,bottom ...

css - 将文本向右移动

3 个答案: