Set border based on padding from content

Question

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

May be [this answer](http://stackoverflow.com/a/17494527/2533215) will be also useful? — Ilya Streltsyn, Jul 06 '13 at 11:16

Satinder singh · Accepted Answer · 2013-07-06T11:02:37.823

2

Click Demo

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

edited Jul 06 '13 at 11:02

answered Jul 06 '13 at 10:54

Satinder singh

10,100
16
60
102

I think margin is useless. – Mike Jul 06 '13 at 11:03
Yes same thing can achieve with many combination, we can also set fixed width, As OP dnt want text to come 2nd line fixed width will solvd – Satinder singh Jul 06 '13 at 11:07
The margin and float property make it works like magic! Thanks a lot man! – Nil Jul 06 '13 at 11:31
Yes, margin is useless. One more thing, padding between border and content. Edit: Oops, can be done by modifying the padding, sorry, got confused. – Nil Jul 06 '13 at 11:42

Mike · Answer 2 · 2013-07-06T10:56:54.557

1

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.

edited Jul 06 '13 at 10:56

answered Jul 06 '13 at 10:51

Mike

1,979
2
16
29

Am not sure whether `word-wrap: break-word;` works great with **IE** – Satinder singh Jul 06 '13 at 10:57
1

Doesn't work, try you delete all the words and change it to only 1 word. – Nil Jul 06 '13 at 11:00

score 0 · Answer 3 · answered Jul 06 '13 at 10:44

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.

Set border based on padding from content

3 Answers3