Search code examples
htmlcsstagswidth

Is there a way to change the width of the <code> HTML tag?


I've noticed that any modification of the <code>'s style with respect to its width doesn't have any effect. It's seems to always be set to "auto".

I'm just trying to have some code written inside a <code> tag (this tag is mandatory due to some known iBooks bugs) that has 100% width. One workaround is to put the <code> inside a <div> which has a 100% background style. This works OK but I'll have to deal with a couple of hundred <code> tags... This is the reason I would prefer just to be able to modify the <code>'s width.

Any thoughts? Thanks.


Solution

  • <code> elements are inline elements. Setting a height or width on these do not have any effect on their size.

    Use display:inline-block::

    code {
        display: inline-block; 
        width: 100px; /* Whatever. The <code>'s width will change */
    }