A display:table Trick
When a border is put under an HTML header tag, the border extends all the way across the content width. The same with a border under other HTML content tags.
Here is a header tag (<h3>) with a CSS border-bottom:3px double #999; definition to serve as an illustration.
My Text
That may be what the page designer wants.
However, if border only under the text is preferred, then display:table; can be added to the style.
Here is an illustration with the border only under the text, not extended all the way across.
My Text
Unless constrained, the box that contains the header extends all the way across. The display:table; CSS definition constrains the box like it would if the header was within an HTML table. The width of the box is the width occupied by the text.
Here is the source code of the two examples above.
<h3 style="border-bottom:3px double #999;">My Text</h3>
<h3 style="display:table; border-bottom:3px double #999;">My Text</h3>
For the second illustration, the CSS display:table; definition was added to the style.
The display:table; trick can be used for any type of border under, over, or around HTML containers — header, code box div, paragraph, …
(This content first appeared in Possibilities newsletter.)
Will Bontrager
Was this blog post helpful to you?
(anonymous form)
All information in WillMaster Blog articles is presented AS-IS.
We only suggest and recommend what we believe is of value.
As remuneration for the time and research involved to provide quality links,
we generally use affiliate links when we can.
Whenever we link to something not our own, you should assume
they are affiliate links or that we benefit in some way.
Recent Articles in the Library
The HTML Q Tag
Create a style then use the HTML q tag to apply the style. This is about as easy as it gets for attracting attention to quotes.
Plain Text To HTML Converter
Here is a function to convert plain text from a form textarea field into HTML for publishing on a web page or in an email.
HTML for Meme Making
No fancy image creation software is needed to make memes. An easy way is to create a web page with text over an image or color background and screenshot it.
Image Color Saturation
The CSS filter:saturate() declaration can be used to lesson color saturation and to intensify color saturation of images.
PDF to Text Conversion
If you can use a PDF to text converter and your website is on a Linux machine, this one should do you well.
Text Emphasis
When your writing can be improved with the correct emphasis, this CSS may be used.
Dropdown Links
I used to see many dropdown links during the earlier part of my internet experience.
