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

Question

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.

Answer 1

Add a display: block or inline-block as per your requirement to the code element. Rest should work as planned

See an example

Answer 2

<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 */
}