html - 如何将宽度设置为 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
}