j22cal Posted March 31, 2010 Report Share Posted March 31, 2010 I was curious if I was doing this correctly. Normally, if I have text inside of a div, I will separate the styling out like so: <div id="one"><span>text</span></div> #one { width: 500px; height: 300px; background: red; ... etc } #one span { font-size: 1.0em; color: #fff; padding: 20px; display: block; ... etc } My thoughts were that it is a good idea to separate the content out like this. Is this necessary and a good practice? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 31, 2010 Report Share Posted March 31, 2010 I would say that this is bad style, actually. The less code you write, the better -- there is less potential for errors, will give you a slight speed increase, and it will be easier to read and understand later. There's absolutely no reason to have that span within the div -- just add the text styling to the div itself. If you want, though, you could separate the styling within your css code. For example: /* Div styling */ #one { width: 500px; height: 300px; background: red; ... etc } /* Text styling */ #one { font-size: 1.0em; color: #fff; padding: 20px; ... etc } Quote Link to comment Share on other sites More sharing options...
j22cal Posted March 31, 2010 Author Report Share Posted March 31, 2010 I think my original incentive for doing it that way was because there is some kinda bug in IE6 when you apply margin(or padding, can't remember) to an element that already has a width. And that was just my way to eliminate that problem. Is that logical, or is there a better way to avoid that problem? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 31, 2010 Report Share Posted March 31, 2010 I think my original incentive for doing it that way was because there is some kinda bug in IE6 when you apply margin(or padding, can't remember) to an element that already has a width. And that was just my way to eliminate that problem. Is that logical, or is there a better way to avoid that problem? True, IE6 does handle width differently due to the box model issue. In that case, what you are doing above is fine, but I would only do that for cases where you specifically need to avoid that issue. In most cases, you shouldn't need to define both a width and padding/margin on the same element. And I usually use a div, rather than a span, since it already is display:block and technically (you aren't doing this, but it could happen if you revise the code in the future) you can't place block level elements (divs, p tags, etc) within spans. Quote Link to comment Share on other sites More sharing options...
j22cal Posted March 31, 2010 Author Report Share Posted March 31, 2010 ok, thanks. I will abandon this practice then... Are there any other scenarios where setting the code up with divs(span, p) inside of divs for the font styling would be applicable? Quote Link to comment Share on other sites More sharing options...
Jsheffers Posted April 22, 2010 Report Share Posted April 22, 2010 ok, thanks. I will abandon this practice then... Are there any other scenarios where setting the code up with divs(span, p) inside of divs for the font styling would be applicable? I wouldn't completely abandon this practice because it is useful in other situations. For example if you were in the situation below it would be useful. <p class="price">$<span>10.00</span></p> This would allow you to style the $ sign and the actual dollar value independently. Lets say for some crazy reason you wanted the $ to be bold and the actual 10.00 to be italic. You would use the CSS below. .price { font-weight: bold; } .price span { font-weight: normal; font-style: italic; } Of course you could shorthand the Font property but for simplicity sake I just split it into weight and style. In other words because in your example you wrapped all of the content in a div and the span tag it has no purpose, but in the example I presented the dollar sign is outside of the span tag. Hope this helps. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.