Search code examples
htmlbrowser

browser ignores spaces

This is my first time playing with html. I have this code that should display a simple pice of ascii art.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                height: 100vh;
                display: flex;
                flex-direction: column; /* Ensures elements stack vertically */
                font-family: Arial, sans-serif;
            }
            hr {
                width: 100%; /* Ensures the hr spans the full width */
            }
        </style>
    </head>
    <body>
        <hr>
        <p style="text-align: center">
                                          _//|                        <br>
                                        //##||                        <br>
                |\__                  //####||                        <br>
                ||##\\__            //##    ||                        <br>
                ||######\\________//##      ||                        <br>
                ||    #############         ||                        <br>
                ||                          ||                        <br>
                ||                          ##\\                      <br>
                ||                            ##\\                    <br>
                  ||                            ##\\                  <br>
                  ||                              ||________          <br>
                  ||                      //\\    ||        \\        <br>
                ||        //\\          //####\\  ||          \\      <br>
                ||      //####\\        \\##  //  ||            \\    <br>
                ||      \\##  //          \\//  ||    ______      ||  <br>
                //\\      \\//                  ||  //      \\____||  <br>
              //####\\__                      //__//              ##\\<br>
              ||        \\____            __//##                  ##||<br>
              ||              \\________//                          ||<br>
              ||                                                    ||<br>
              ||                                                    ||<br>
              ||                                                    ||<br>
              ||                                                  ||  <br>
                \\                                                ||  <br>
                ||                                              //    <br>
                  \\                                          //      <br>
                    \\__                                  __//        <br>
                        \\______________________________//            <br>
        </p>
        <hr>
    </body>
    </html>

However the result looks like this: enter image description here

Why is the browser ignoring the spaces? It's not doing it when I write normal text.

Solution

  • you need use HTML tags < pre >you code or text< /pre >