CODEWITHSUNDEEP
javascripthtmlcssweb
Nil
Nil

Reputation: 361

Set border based on padding from content

As far as I know padding is the space between border and content. I tried using padding but instead of the border shrinking down to the content, the content gets pushed to a new line.

What I want is the content to stay but the border autoscale/auto size to the content. And if possible, if the content is resized (let's say different reso or the browser window gets smaller), the border also follows the content but still keeping the padding value (in my case, 10px)

Been playing around with margin and padding since yesterday, but still no idea how to do it. Any help will be really appreciated, guys.

td;dr: How to get border to autosize/autoscale to content.

html:

<div id="container">

    <div id="eachitem">

    </div>
</div>

css:

#container {
    margin: 0px 60px 0px;

}

#eachitem {
    padding: 5px 2px 5px 5px;
    border: 5px solid black;
}

Container is for position the whole content into postion based on margin. Each item is for an individual item based on a list. That is where I want the border to autosize/autoscale to, to the items.

Since different content have different length. I want it to scale down to the max content as shown in image below: Example

Upvotes: 0

Views: 124

Answers (3)

Satinder singh
Satinder singh

Reputation: 10198

Click Demo

   #eachitem {
    padding: 5px 2px 5px 5px;
    border: 5px solid black;
    float:left;
     width:250px;
}

Upvotes: 2

Mike
Mike

Reputation: 1999

Try to use word-wrap property.

#container {
    margin: 0px 60px 0px;

}

#eachitem {
    padding: 5px 2px 5px 5px;
    border: 5px solid black;
    word-wrap: break-word;
}

Here is an example with your code.

After you edit your question, I see you want border to fit the content exactly? Well, try this.

#container {
    margin: 0px 60px 0px;

}

#eachitem {
    padding: 5px 2px 5px 5px;
    border: 5px solid black;
    display: inline-block;
    word-wrap: break-word;
}

Here is an example.

Upvotes: 1

Pranav Negandhi
Pranav Negandhi

Reputation: 1624

Resizing padding, margins and border weights based on content size is nasty in any language, due to the unpredictable nature of text. Content length, font weight and sizes, display resolution and window size all affect text in myriad ways. Additionally, most high-level languages like JS cannot compute text dimensions without actually rendering it first. This means you must first display the text, then compute how much space it occupies, then twiddle the surrounding properties. And depending on the APIs available, you might not even be able to predict what values to use. In that case, you have to iterate over multiple values, see what it looks like, and if it is not correct, run through all the steps again. Not a fun endeavour to get into.

Upvotes: 0

Related Questions