why the class margin not work?

css

Solution

You can't give it a width because it is an inline element.

This property specifies the content width of boxes generated by block-level and replaced elements. This property does not apply to non-replaced inline-level elements. -- CSS 2.1 Width property

You can fix this by making it a block or inline-block element instead:

display:inline-block

However, this may not be supported by some browsers. You can probably achieve the same result with this, however:

margin-left:40px

Problem

The code is as below: ``` <html> <head> <title>test</title> </head> <body> <div><span>shanghai</span><span class="margin"> </span><span>male</span></div> </body> </html> .margin { width:40px; height:auto; } ```

Original source