How to add left margin and wrap long lines in code tag

Question

I have code like this:

 code { width: 520px; margin: 0 0 30px 200px; } 

 <code> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/0.10.4/js/jquery.terminal.min.js"&gt;&lt;/script&gt;<br/> &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/0.10.4/css/jquery.terminal.min.css" rel="stylesheet"/&gt; </code> 

but the margin is added only to the first line, I've try to add white-space: pre-wrap; with this css (found on css tricks ):

 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */

but then I don't have margin at all. How can I add margin to code tag and make text wrap if too big?

Answer 1

You could try adjusting how the <code> element itself is displayed by using display: block , which can affect how properties like padding or margin are applied:

code {
    display: block;
    width: 520px;
    margin: 0 0 30px 200px;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word; 
}

Example

You can see an interactive example of this in action here and what it looks like below :

Answer 2

It seems that I need to add wrapper:

 .code_wrapper { width: 520px; margin: 0 0 30px 200px; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } 

 <div class="code_wrapper"> <code> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/0.10.4/js/jquery.terminal.min.js"&gt;&lt;/script&gt;<br/> &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/0.10.4/css/jquery.terminal.min.css" rel="stylesheet"/&gt; </code> </div> 

Answer 3

You can put inside a div like this:

 <div class='outer_code' > <code>...</code> </div> Then in CSS 

<div class='outer_code' > <code>...</code> </div> Then in CSS

  .outer_code{ width: 520px; margin: 0 0 30px 200px; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; }