HTML tag causes linebreaks

Question

I\'m using CSS (via JQuery , but not relevant to this question) to highlight certain elements within an HTML file: I\'m using \"pre\" tags to separate out logical elements i

Answer 1

Don't use pre, instead escape the characters you want to display literally. Like < and > for < and >. When you render your page, you can use a function like htmlentities() (PHP) to escape these characters for you.

Answer 2

The pre tag is a block level element, so it will behave like any other block level element and stack vertically (like paragraph, div, etc). You can set it to display:inline instead, I guess.

But better would be to use the <code> tag, which is inline by default.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code

Answer 3

You can convert HTML source to use special chars instead of < > (like < >). You can do this with notepad++ using TextFX Plugin (Encode HTML) or in eclipse you can do this with anyedit tools.

Answer 4

you can use padding:0 and margin:0 for pre in css

Answer 5

That's because <pre> has a default style display: block, use in your css pre { display: inline}

as for your edit, you need to add margin: 0; to ALL the pre blocks, not just the ones you want to style:

pre {
    display: inline;
    margin: 0;
}

You should try to avoid styling with JS whenever possible, but if you really must:

<script type="text/javascript">
    $("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
    $("pre").css({ "margin" : 0, "padding" : 0 })
</script>

Answer 6

You can force the pre tag to be a inline element by adding this in head:

<style type='text/css'> pre {display: inline;} </style>