htmlcssflexboxpre

Pre element formatting is off


I'm pretty new to html and css so forgive me if my question doesn't make 100% to any veterans. I am trying to apply a formatted line of code to a website using the element but it is using all of the white space before the lines. element for the code This is how it looks when I open the code in a browser I've tried adding the style="white-space: pre-line;" attribute to the element in the html but when I open the code in a browser it removes the indents that I want to be formatted into the lines. The incorrectly formatted lines after adding the style attribute

I am expecting the outcome to look like the image below. With the text formatted how css is normally coded and aligned to the left of the flexbox. I have tried other white-space values and nothing seems to work how I want. An image from my homework assignment describing how our website should look


Solution

  • This is the normal behaviour, because the <pre> element's default style is white-space: pre;. With that every space, new line, tab and other character are rendered as-is. So if you have spaces in the <pre> element before the actual text, it will be rendered.

    To solve your problem, remove the spaces or tabs before the code.