Issue
Suppose I have a div with some text in it
<div id='page' style='width: 600px'>
<h1 style='border:2px black solid; font-size:42px;'>Title</h1>
</div>
The border for the heading will extend all 600 pixels across the page, but I want the word "Title" to fit tightly inside. However, I don't know ahead of time how many pixels wide the word is so I can't for example put the "Title" inside a div and set its width explicitly.
Is there an easy way to make a border fit around text that does not fully extend horizontally across an area?
Solution
This is because h1
is a block element, so it will extend across the line (or the width you give).
You can make the border go only around the text by setting display:inline
on the h1
Example: http://jsfiddle.net/jonathon/XGRwy/1/
Answered By - Jonathon Bolster
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.