Advertisement
Advertisement


Width equal to content


Question

I'm experiencing some trouble with the width property of CSS. I have some paragraphs inside a div. I'd like to make the width of the paragraphs equal to their content, so that their green background looks like a label for the text. What I get instead is that the paragraphs inherit the width of the div father node which is wider.

#container {
  width: 30%;
  background-color: grey;
}

#container p {
  background-color: green;
}
<div id="container">
  <p>Sample Text 1</p>
  <p>Sample Text 2</p>
  <p>Sample Text 3</p>
</div>

2018/02/06
1
95
2/6/2018 10:43:28 PM

Accepted Answer

By default p tags are block elements, which means they take 100% of the parent width.

You can change their display property with:

#container p {
   display:inline-block;
}

But it puts the elements side by side.

To keep each element on its own line you can use:

#container p {
   clear:both;
   float:left;
}

(If you use float and need to clear after floated elements, see this link for different techniques: http://css-tricks.com/all-about-floats/)

Demo: http://jsfiddle.net/CvJ3W/5/

Edit

If you go for the solution with display:inline-block but want to keep each item in one line, you can just add a <br> tag after each one:

<div id="container">
  <p>Sample Text 1</p><br/>
  <p>Sample Text 2</p><br/>
  <p>Sample Text 3</p><br/>
</div>

New demo: http://jsfiddle.net/CvJ3W/7/

2016/07/27
148
7/27/2016 2:28:23 PM


The solution with inline-block forces you to insert <br> after each element.
The solution with float forces you to wrap all elements with "clearfix" div.

Another elegant solution is to use display: table for elements.

With this solution you don't need to insert line breaks manually (like with inline-block), you don't need a wrapper around your elements (like with floats) and you can center your element if you need.

http://jsfiddle.net/8md3jy4r/3/

2016/05/20

Adding display: inline-block; to the p styling should take of it:

http://jsfiddle.net/pyq3C/

#container p{
    background-color: green;
    display: inline-block;
}
2013/12/04

set width attribute as: width: fit-content

demo: http://jsfiddle.net/rvrjp7/pyq3C/114

2017/08/23

Set display:inline-block and then adjust your margins.

fiddle here: http://jsfiddle.net/Q2MrC/

2013/12/04

You can use either of below :-

1) display : inline-block :

http://jsbin.com/feneni/edit?html,css,js,output

Uncomment the line

 float:left;
 clear:both 

and you will find that parent container has collapsed.

2) Using display : table

http://jsbin.com/dujowep/edit?html,css,js,output

2016/06/30