HTML/CSS Display:Inline Issue - html

Question

I have multiple paragraphs of text in an HTML document. Also, at various points, some of the text is wrapped in <h6></h6> tags, which is meant to apply certain font effects. In my CSS, the h6 tag is set to display:inline; so the paragraph keeps going continuously without a line break. This works except for the first instance of h6 on each page it is used: there is always a line break before the first element. Does anyone know why/how to prevent this?
CSS:
h6 {
font-family:'Courier New',Courier,'Nimbus Mono L',monospace;
font-size:125%;
display:inline;
}
HTML:
As expected, not a lot was accomplished (in this plane) over a
five-day weekend when much of it was devoted tot he college
process. However, I'm down to only a handful of HTML-validation
errors. A couple of which are going to be particularly problematic,
dealing with my new <h6>Lytebox JavaScript</h6> I talked about
earlier: to enable Lytebox on an image, you give it a CSS tag
<h6>data-lyte-options</h6>...
The second essence of h6 works fine, but there is a line break before the first.

Answer 1

Heading elements can't be contained inside paragraphs, because inherently they're treated as block-level elements hence browsers break paragraphs when they get to a block-level element like heading.
Your particular HTML gets changed to this by browsers:
<p>
As expected, not a lot was accomplished (in this plane) over a
five-day weekend when much of it was devoted tot he college
process. However, I'm down to only a handful of HTML-validation
errors. A couple of which are going to be particularly problematic,
dealing with my new
</p> <!-- browsers end a paragraph here!!!!! -->
<h6>Lytebox JavaScript</h6>
I talked about earlier: to enable Lytebox on an image, you give it a CSS tag
<h6>data-lyte-options</h6>
...
<p></p>
I found a reference to this fact in HTML specification:
The P element represents a paragraph. It cannot contain block-level elements (including P itself).
And another reference that talks about block-level elements:
Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.
Solution?
The problem is that you're using headings as usual paragraph text (with its own style). You should be using SPAN elements instead to make your HTML valid.
If all you'd like to do is to format your text to be displayed as code then you can also use CODE element which should be used exactly for this purpose.

Answer 2

You want the element to be inline and apply special font formatting right?? Then you can enclose them in a 'span' tag
As expected, not a lot was accomplished (in this plane) over a five-day weekend when much of it was devoted tot he college process. However, I'm down to only a handful of HTML-validation errors. A couple of which are going to be particularly problematic, dealing with my new <span>Lytebox JavaScript</span> I talked about earlier: to enable Lytebox on an image, you give it a CSS tag <span>data-lyte-options</span>
span { font-family:'Courier New',Courier,'Nimbus Mono L',monospace;font-size:125%;}

Answer 3

Why not create a unique class and apply it to your <p> tags as needed. You mention some are wrapped in h6 tags to apply styles. That can be done with <p class="onestyle"></p> and yet you can still have <p></p> regular p tags.
Then with your h6, you can float them left instead of using display:inline or do inline-block, just about the same affect with all. Then apply padding margins as you need to all your styles.

Answer 4

Try using CSS selectors to specifically target that instance. Not 100% sure this will fix it, but worth a try.
h6:first-child { display:inline; }