title: HTML <br/> tag breaks <code> segments?
body: <p>I have an HTML page with some <code>&lt;code&gt;</code> segments, and I have given them these attributes in an external CSS folder:</p>
  
  <pre><code>code {
  
      background-color: f5f5ff;
      border-color : 7f7fbf;
      border-style : dashed;
      border-width : 1px;
      font-family  : courier new;
      margin-left  : 128px;
      padding      : 14px;
  }
  </code></pre>
  
  <p>Whenever I put a <code>&lt;br/&gt;</code> 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>&lt;code&gt;</code> segment placed directly below it, down to about where the padding would end, and without a left margin.</p>
  
  <p>How do I make a <code>&lt;code&gt;</code> segment with line breaks that displays all the code in a single 'box', line breaks and all, until the end of the <code>&lt;code&gt;</code> segment, like it is being displayed in the <code>&lt;code&gt;</code> segments in the preview of my post right now?</p>
  
  <p>Here's an example of one of my <code>&lt;code&gt;</code> blocks/segments:</p>
  
  <pre><code>import math&lt;br/&gt;
  def areaCircle(r)&lt;br/&gt;
  return (math.pi * r) ^ 2
  </code></pre>
  
  <p>Unfortunately, I cannot provide a picture because I am a very new user.</p>
  
  <p>I have tested this in both Chrome and FireFox; the problem is exactly the same in both browsers.</p>