0

I tried with no success to remove some space at the bottom of a Modal:

<div class="modal fade" id="ModalDetails" role="dialog" >
<div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content" style="background-color:red;margin:0px;padding:0px;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"><i class="fa fa-user-plus fa-3x pad-r-10"></i>Informations détaillées d un compte</h4>
        </div>
        <div class="modal-body pad-0">
            <iframe id="If_accountdetails" name="If_accountdetails" width="100%" height="400" style="overflow-x:hidden !important;border: 0px;" class="noborder" src="about:blank"></iframe>
        </div>
    </div>

</div>

We can see a red line corresponding to the modal-content despite a margin and a padding to 0px: Modal with space (red)

Does anyone know how to remove this space?

Thanks.

London Smith
  • 1,622
  • 2
  • 18
  • 39

1 Answers1

3

This is a bit of a guess (please provide some CSS), but I'd assume the issue is the iframe. iframes are "inline frames", so they are affected by line height, vertical alignment, and whitespace. Try adding display:block to the iframe to override this behavior and the red gap should disappear.

Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129