Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

why the class margin not work?

Tags:

css

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;
}
like image 839
omg Avatar asked Jun 29 '09 09:06

omg


2 Answers

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
like image 95
Nick Retallack Avatar answered Oct 15 '22 09:10

Nick Retallack


CSS should go into the head section and should also be wrapped in < style > tags...

Unless you are accessing this value from a stylesheet. You would need to reference this in the head section of your document:

<link rel="stylesheet" type="text/css" title="RSS" href="MyStyleSheet.css">   
like image 31
James Avatar answered Oct 15 '22 09:10

James