Bootstrap kann nicht entfernt werden

Question

Ich habe eine Lücke direkt unter meinem ersten Pre-Tag Ich kann es nicht entfernen.

Ich habe versucht,

pre { 
    margin: 0 0 0; 
} 

Und

pre { 
    margin: 0 0 0 !important; 
} 

aber zeigt noch

Frage: Wie ist es möglich, richtig entfernen Sie den Rand oder die Polsterung knapp unter dem ersten pre?

Hinweis: nur etwas herausgefunden unten mit nl2br auf Controller-Funktion zu tun

Ich benutze codeigniter und Ajax um die Vorschau zu erzeugen.

CSS

<style type="text/css"> 

body { 
    background-color: #F0F0F0; 
} 

pre { 
    display: block; 
    padding: 9.5px; 
    margin: 0 0 0 !important; 
    font-size: 13px; 
    line-height: 1.42857143; 
    color: #333; 
    word-break: break-all; 
    word-wrap: break-word; 
    background-color: #f5f5f5; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
} 

hr { 
    background-color: #dedede !important; 
    height: 1px !important; 
} 

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    margin: 0; 
    padding: 0; 
    font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; 
    margin-top: 0; 
} 
</style> 

Script

<script type="text/javascript"> 
$('#preview-question').on('click', function (e) { 
    $.ajax({ 
     url: "<?php echo base_url('question/preview');?>", 
     type: 'POST', 
     data: { 
      title: $('#title').val(), 
      question: $('#question').val(), 
      '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>' 
     }, 
     dataType: 'json', 
     success: function(response){ 
      if (response.success) { 
       $('#preview').html(response.question); 
       $('#preview pre br').remove(); 
       var str = $('#preview pre').html(); 
       $('#preview pre').html(str.replace(/</g, "&lt;").replace(/>/g, "&gt;")); 
       $('pre').each(function(i, block) { 
        hljs.highlightBlock(block); 
       }); 
      } else { 

      } 
     } 

    }); 

    e.preventDefault(); 
}); 
</script> 

Funktion

public function preview() { 

    $data = array('success' => false, 'question' => ''); 

    if ($_POST) { 

     $data['question'] = nl2br($this->input->post('question')); 

     $data['success'] = true; 
    } 

    echo json_encode($data); 
} 

FULL HTML

<?php echo form_open_multipart('question/create', array('id' => 'question_create', 'class' => 'form-horizontal', 'role' => 'form'));?> 
<div class="container"> 
<div class="row"> 

<div class="panel panel-default"> 
<div class="panel-heading"> 
<h1 class="panel-title"></h1> 
</div> 
<div class="panel-body"> 

<div class="form-group"> 
<label class="col-lg-2">Title</label> 
<div class="col-lg-10"> 
<input type="text" name="title" id="title" class="form-control" placeholder="Title" /> 
</div> 
</div> 

<div class="form-group"> 
<label class="col-lg-2">Question</label> 
<div class="col-lg-10"> 
<textarea name="question" id="question" class="form-control" rows="10"></textarea> 
</div> 
</div> 

<div class="form-group"> 
<label class="col-lg-2"></label> 
<div class="col-lg-10"> 
<div id="preview"></div> 
</div> 
</div> 

</div> 
<div class="panel-footer"> 
<div class="text-center"> 
<button type="submit" class="btn btn-primary">Submit</button> 
<button type="button" id="preview-question" class="btn btn-default">Preview</button> 
<button type="button" class="btn btn-warning">Clear Textarea</button> 
<a href="" class="btn btn-danger" role="button">Cancel</a> 
</div> 
</div> 
</div> 

</div> 
</div> 
<script type="text/javascript"> 
$('#preview-question').on('click', function (e) { 
    $.ajax({ 
     url: "<?php echo base_url('question/preview');?>", 
     type: 'POST', 
     data: { 
      title: $('#title').val(), 
      question: $('#question').val(), 
      '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>' 
     }, 
     dataType: 'json', 
     success: function(response){ 
      if (response.success) { 
       $('#preview').html(response.question); 
       $('#preview pre br').remove(); 
       var str = $('#preview pre').html(); 
       $('#preview pre').html(str.replace(/</g, "&lt;").replace(/>/g, "&gt;")); 
       $('#preview pre').each(function(i, block) { 
        hljs.highlightBlock(block); 
       }); 
      } else { 

      } 
     } 

    }); 

    e.preventDefault(); 
}); 
</script> 
<?php echo form_close();?> 

Answer 1

Zuerst denke ich, Sie

pre verwenden sollten {

margin: 0 0 0 0 !important; 

}
statt

pre {

margin: 0 0 0 !important; 

}
Lassen Sie mich wissen, ob das

Answer 2

hilft Hinzufügen von cle ar in die Pre-Tag

pre { 
    clear:both; 
} 

Answer 3

Ich denke, wenn Sie Ihre HTML wie folgt zu formatieren, können Sie die Ränder eines pre Element verwalten. Sie müssen die "Kasten" -Stile der Farbe und des backgroud z. an die .highlight Klasse und die anderen Stile an die pre.

Das Element code ist optional, wenn Sie denselben 'Code Recognizer' wie Bootstrap verwenden.

HTML

<figure class="highlight"> 
    <pre> 
    <!--<code class="language-html" data-lang="html">--> 
    <!-- your code here --> 
    <!--</code>--> 
    </pre> 
</figure> 

CSS

.highlight { 
    padding: 9px 14px; 
    margin-bottom: 0; /* no margin-bottom */   
} 

Answer 4

Dank @djl Vorschlag, den ich habe herausgefunden, ich brauchte replace('\n', '') meinem Skript hinzufügen unten unsichtbare Linie zu entfernen, bricht

Alle arbeiten

<script type="text/javascript"> 
$('#preview-question').on('click', function (e) { 
    $.ajax({ 
     url: "<?php echo base_url('question/preview');?>", 
     type: 'POST', 
     data: { 
      title: $('#title').val(), 
      question: $('#question').val(), 
      '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>' 
     }, 
     dataType: 'json', 
     success: function(response){ 
      if (response.success) { 
       $('#preview').html(response.question); 
       $('#preview pre br').remove(); 
       var str = $('#preview pre').html(); 
       $('#preview pre').html(str.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace('\n', '')); 
       $('#preview pre').each(function(i, block) { 
        hljs.highlightBlock(block); 
       }); 
      } else { 

      } 
     } 

    }); 

    e.preventDefault(); 
}); 
</script>