How to remove margin introduced in pre tag in bootstrap 4?

The problem is that whenever you apply margin space as per your margin value it will give you output. But in <pre> tag if you apply it by keeping any space then it will consider as margin. Because pre is acted vice versa, means as you have written inside the pre tag the output will be the same.

Note: The examples will act same with the bootstrap.

Example 1: The approach of the pre tag is basically used if you want to write the code and print it as a normal text.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Pre tag usage</title>
    </head>
      
    <body>
          
        <!-- Notice the spces inside of the pre tag -->
        <pre> GeeskforGeeks  </pre>
        <pre> A Computer Science Portal
              For Geeks
        </pre>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:
     GeeskforGeeks  
     A Computer Science Portal
              For Geeks
        

Example 2: Sometimes it happens that you have written some code and give some space or margin inside the pre tag then the output also gives the margin.
Inside pre tag the way you write the code same it will give as an output.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Demo</title>
    </head>
      
    <body>
        <div class="row">
            <div class="col-md-3">
                <pre>
    <p><b>GeeksforGeeks</b>
    This paragraph is on remove margin
    introduced in pre tag in bootstrap 4</p>
    </pre>
            </div>
        </div>
    </body>
      
    </html>                    

    chevron_right

    
    

  • Output:
    GeeksforGeeks
    This paragraph is on remove margin
    introduced in pre tag in bootstrap 4



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.