0

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

Improve this question
3
  • 1
    Pls post your html/css or JS fiddle Commented Jul 6, 2013 at 10:27
  • is this you want jsfiddle.net/k9fnD Commented Jul 6, 2013 at 10:41
  • May be this answer will be also useful? Commented Jul 6, 2013 at 11:16

3 Answers 3

Reset to default
2

Click Demo

 #eachitem { padding: 5px 2px 5px 5px; border: 5px solid black; float:left; width:250px; }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I think margin is useless.
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
The margin and float property make it works like magic! Thanks a lot man!
Yes, margin is useless. One more thing, padding between border and content. Edit: Oops, can be done by modifying the padding, sorry, got confused.
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.

Improve this answer

2 Comments

Am not sure whether word-wrap: break-word; works great with IE
Doesn't work, try you delete all the words and change it to only 1 word.
0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.