Is it wrong to change a block element to inline with CSS if it contains another block element?

Question

I know it\'s wrong to put a block element inside an inline element, but what about the following?

Imagine this valid markup:

This         


        
                      

              相关标签:
       
      

Answer 1

Are the page elements still valid?

“Valid” in an HTML sense, yes; HTML knows nothing about CSS.

The rendering you get in the browser, however, is ‘undefined’ by the CSS specification, so it could look like anything at all. Whilst you could include such a rule in CSS hacks aimed at one particular browser (where you know how that browser renders this case), it shouldn't be served to browsers in general.

Answer 2

I don't know off the top of my head if this validates any rules but I would recommend using the W3C HTML Validator and the W3C CSS Validator to determine that. Hope this is helpful!

Answer 3

The HTML and the CSS will both still be valid. Ideally, you wouldn't have to do something like this, but that particular bit of CSS is actually a handy (and syntactically valid but not semantically valid) way for getting Internet Explorer's double margin bug without resorting to conditional stylesheets or hacks that will invalidate your CSS. The (X)HTML has more semantic value than the CSS, so it's less important that the CSS is semantically valid. In my mind, it's acceptable because it solves an annoying browser issue without invalidating your code.

Answer 4

Regardless if it's valid or not, the element structure is wrong. The reason that you don't put block elements inside inline elements is so that the browser can render the elements in an easily predictable way.

Even if it doesn't break any rules for either HTML or CSS, still it creates elements that can't be rendered as intended. The browser has to handle the elements just as if the HTML code was invalid.

Answer 5

No, It is not a wrong choice. We can use as per requirements.

Answer 6

I think, (x)html is valid, css is valid. Is the result valid? Yes, if it is looking in the browser as You want.