How do you choose when to use DIV and when SPAN, to wrap something?
Many time when we make PSD 2 HTML, in some conditions to get any effect or to wrap something to get needed effect, we use div or span.
And I know div is block level element and span is inline level element and we can change display properties through CSS. and I also know div cannot come inside span.
What are cases when you use div as a display:inline and span as a display:block? and should we try to avoid those scenarios? is this semantically incorrect?
and when we use blank div or span (no content inside) to get some effect, than which is correct?
As you note, you should use divs as dividers of blocks, and spans for marking inline content.
And yes, you should try to avoid changing the display types of them.
Regarding blank element, div is better as you can define its width and height while for span it won't have proper effect.
Most simple example to prove this point can be seen in action here: http://jsfiddle.net/yahavbr/4DZkV/
This is still a good question but the suggested answers only seem to address part of the question. There are three CSS display types, which help put this into perspective: inline, block, and inline-block. If you read this other Stackoverflow topic, CSS display: inline vs inline-block, I think you'll get some useful guidelines. For example, if you need to ensure the element has distinct top and bottom padding and margins, then it probably needs to be a div (with CSS style inline-block), otherwise a span is probably a better choice.
Related
When you set a button element to display:block it dominates its vertical space like a block while still calculating its size based on its contents like an inline-block. This seems like a really useful behavior. Is it possible to make other elements behave this way?
Example
I can accomplish a similar method of display using floats and clears, but it causes havoc on nearby content that isn't tailored to it.
I can accomplish it more sanely by wrapping each element and making the outer element display:block while the inner element is display:inline-block. This requires extra markup though.
Sounds like you want display: table.
Such a “table” shrinks to just fit its content, and if the content is not a display: table-row or display: table-cell then it is just treated as if it were inside a single-cell table. You can also center it horizontally using auto margins.
I changed block to table in your example and it did exactly what I think you want.
(If you've thinking about the advice “don't use tables for layout” — that is referring to using tables written in HTML markup, not any CSS facilities.)
I need completely dumb tag which does absolutely nothing. div breaks line and I wouldn't like to use span because I will put another elements inside this dump tag and I'm not sure if span is designed to contain other elements.
These two solutions came up to my mind:
Use span anyway
Use completely unused tag
but im not sure how it would work in older browsers.
PS: I already solved my problem by using divs, but I am still curious about this question.
Use div with an inline-block attribute? Might do what you need.
div{
display: inline-block;
}
Also, I'd like to address the comments underneath your question.
A <span> would indeed work fine for what you're doing. The only difference between a span and a div is that a div is, by default a block element while a span is an inline element by default. I would still use a div container in your case, however, because to me it makes more sense to wrap elements in a div over a span.
You could use any element really. The thing you would have to remember is to make the position: fixed; which will take it out of the natural flow and set a z-index: -10;. This would ensure it is always hidden in the background and the other elements would be on top of it.
You didn't specifically mention when you where trying to accomplish so this is just a first-round guess.
Since I am having trouble with Firefox about positioning a block element by nature (header) to be inline by using display:run-in; i'm asking you for your help ! been searching for quite some time now and I cant find which CSS method could be used instead of just applying display:run-in; to the element, which is supported in all the major browsers. It is crucial that i position the element this way.
Anyone knows a method how to do this ?
If you'd like to display your element as a block element, but would position it inline, then
display: inline-block;
will do the trick for you.
The MDN still lists run-in as an experimental value, so we shouldn't be too surprised if it doesn't fully function in Firefox at this time.
As for options, there are at least two you could use: display: inline and display: inline-block.
Inline might suffice if you don't need the properties of a block element on your header. Inline-block keeps it as a block element, so you can still do nice things like give it width, height, margin and so on.
View them on JSFiddle.
Alright i found a solution ! :) Using display:inline; in a combination with float:left; will make a block element by nature use space only as much as he needs, not full 100% of its parent element.
There is just one problem with this tecnhique if you are using bigger font for lets say a heading and want to add a paragraph right after it (on the same line). If the headings font-size is a bit bigger, heading could take 2 or even more lines of space in height where paragraphs text should be,and you will have a small gap between header and another row of paragraph under it. The solution is to add display:block; and margin-top:Xpx; to the paragraph element to align it as needed.
I have emoticons in a css sprite image that I want to display within text, so I have spans inserted with background definitions but as these spans are inline elements I can not define the width and height.
The only thing I could think of is make them block elements and float left, but I'm not sure if this is the best approach. What do you think is the best way to do this?
try to use the css property and value display: inline-block
I do not think that display: inline-block is supported enough to rely on. Obviously I am talking about <=IE7, and possibly other mobile devices. Which unfortunately are still in use. However there comes a point when one stops supporting IE.
I would try using a div floated, with background attributes set. Failing that a single image.
I have multiple questions. If I want an inline list to be a certain height/width is it better to use display:inline; and set the height and width to the <ul> element ? Or should I use float:left; and apply overflow:hidden; to the <ul> element? Also, is it better to apply the margin/padding the the <li> element or the <a> inside the list? Do you even need to if you reset the values? Will each occupy as much space as they can or will the last-child be longer to accommodate for excess space?
Your question is pretty theoretical.
You probably need to explain more what you're trying to do because there are benefits and drawbacks to what you're talking about.
For example, pure "inline" elements height or width will be ignored. You need to use a block-level element to do that, which includes floated blocks or "inline-block".
http://jsfiddle.net/3YU3y/3/
And if you float, it might position itself differently than what you're expected.
If you're looking to do a horizontal list vs an "inline list", then there's plenty of design patterns out there for that. Check out Dan Cederholms website for some real common HTML/CSS patterns:
http://pea.rs
Check out "lists" and "navigation" in particular.
Hope that helps!
Cheers!
I prefer to display inline as it seems to make more sense to me to use that over floating something that I suspect was never intended to be floated.
Floating things is very handy for layouts and inlining lists but I am guessing not its original intent.
I would apply all styling to the inside element (A), not the list. I'd style the list for float:, position: or display: only; Whether you use use inline or float is up to you. Just make sure you use display:block on the A-tag.
See my tutorial: http://preview.moveable.com/JM/ilovelists/
Here's a good example I put together to play with. It breaks down each of the concepts you're looking for.
Use display:inline. Via CSS set a width to your li if you want a fixed width. Use line-height for a fixed height.