Question

I have an HTML page with some <code> segments, and I have given them these attributes in an external CSS folder:

code {

    background-color: f5f5ff;
    border-color : 7f7fbf;
    border-style : dashed;
    border-width : 1px;
    font-family  : courier new;
    margin-left  : 128px;
    padding      : 14px;
}

Whenever I put a <br/> in my code segments, the code seems to jump to the left, ignoring the margin, and the padding covers the last line, like it was a whole new <code> segment placed directly below it, down to about where the padding would end, and without a left margin.

How do I make a <code> segment with line breaks that displays all the code in a single ‘box’, line breaks and all, until the end of the <code> segment, like it is being displayed in the <code> segments in the preview of my post right now?

Here’s an example of one of my <code> blocks/segments:

import math<br/>
def areaCircle(r)<br/>
return (math.pi * r) ^ 2

Unfortunately, I cannot provide a picture because I am a very new user.

I have tested this in both Chrome and FireFox; the problem is exactly the same in both browsers.

Answer 1

You are better off not adding <br /> and using white-space: pre and display: block on the code element.

code {
   display: block;
   white-space: pre;
}

jsFiddle.