Unable to remove margin bootstrap - css

Question

I have a gap just below my first pre tag I can not remove it.
I have tried
pre {
margin: 0 0 0;
}
And
pre {
margin: 0 0 0 !important;
}
But still shows
Question: How is it possible to correctly remove the margin or padding
just below the first pre?
Note: just found out something to do with nl2br on controller function below
I use codeigniter and ajax to generate the preview.
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, "<").replace(/>/g, ">"));
$('pre').each(function(i, block) {
hljs.highlightBlock(block);
});
} else {
}
}
});
e.preventDefault();
});
</script>
Function
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>
Cancel
</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, "<").replace(/>/g, ">"));
$('#preview pre').each(function(i, block) {
hljs.highlightBlock(block);
});
} else {
}
}
});
e.preventDefault();
});
</script>
<?php echo form_close();?>

Answer 1

I think if you format your HTML like this, you can manage the margins of a pre element. You have to apply the 'box' styles of color and backgroud e.g. to the .highlight class and the other styles to the pre.
The code element is optional if you use the same 'code recognizer' as bootstrap.
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 2

First i think you should use
pre {
margin: 0 0 0 0 !important;
}
instead of
pre {
margin: 0 0 0 !important;
}
Let me know if that helps

Answer 3

Add clear into the pre tag
pre {
clear:both;
}

Answer 4

Thanks to #djl suggestion I have found out i needed to add replace('\n', '') to my script below to remove invisible line breaks
All working
<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, "<").replace(/>/g, ">").replace('\n', ''));
$('#preview pre').each(function(i, block) {
hljs.highlightBlock(block);
});
} else {
}
}
});
e.preventDefault();
});
</script>