text gap in CSS

Question

I am trying to insert text under an <li> tag. I made some curvy background. now my texts are going out of the border.

Link to Image

Now I want that text centered, and to make some gaps from the background from beginning and the end. I want a dynamic background so that it can set its width as the text size and give some more space at beginning and at end.

Can you please tell how to do this? Here is my HTML and CSS code:

.din{
    display: inline;
    border-radius: 15px 15px 15px 15px;
    background-color:#7c7779;
    text-align:center;
    color: #f8d8a9;
    width: 100px;
}

<ul class="date">
    <li class="din">
        মংলবার
    </li>
</ul>

Answer 1

Add padding: 5px; to your css.

.din {
    display: inline;
    border-radius: 15px 15px 15px 15px;
    background-color:#7c7779;
    text-align:center;
    color: #f8d8a9;
    width: 100px;

    padding: 5px;
}

Here is the JSFiddle demo

Answer 2

You can add padding to the li. This padding will always be consistent no matter how big the content is. See snippet.

Also, the li does not accept the width because it's marked as inline. If you set display to inline-block instead, the width will be acknowledged. Inline elements cannot have a set width.

It sounds like you want the content/background to be dynamic though so you probably don't want to be setting a width anyway though?

.date {
    margin:0;
    padding:0;
}

.din {
    display:inline;
    border-radius:15px;
    padding:5px 10px;
    background-color:#7c7779;
    text-align:center;
    color:#f8d8a9;
}

<ul class="date">
    <li class="din">
        মংলবার
    </li>
</ul>