如何将宽度设置为auto + 5px？

Question

我想知道，这样的事情可能吗？ ：

#test{
    background-color: red;
    width:auto + 5px;
}

我不想要<div>，完全符合其中文字的宽度。我希望它是“'文字宽度'+ 5px”。

是否可以使用css？

Answer 1

我建议使用填充：

#test {
    background-color: red;
    width:auto;
    padding:0 5px;
}

这会在右侧和左侧创建5px的填充。 顶部和底部的填充为0。

Answer 2

div的自动宽度为100％。如果您只需要其内容的宽度，请使用float: left/right

#test {
    float: left/right;
    background-color: red;
    padding-left: 5px;
    /* OR */
    padding-right: 5px;
}

Answer 3

使用填充。

    #test{
        background-color: red;
        width:auto;
        padding: 0px 5px;
    }

Answer 4

如果您希望实现width:auto + 5px，那么您必须使用样式表语言，例如sass，compass等。

如果你想在你的文字周围留出额外的空格，你可以使用填充如下 -

#test {
   padding:5px;  //for all top, right, bottom, left
    OR
   padding:5px 3px; //5px for top, bottom and 3px for left right
    OR
   padding:5px 3px  4px;  //5px for top, 3px for left and right and 4px for bottom
    OR
   padding: 5px 4px 3px 2px;  //goes this way, top-right-bottom-left
}