This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
What is the difference between HTML tags DIV and SPAN?
I know when coding HTML, I'm supposed to keep semantics in mind, e.g., h1 needs to be a main header, h2 needs to be a subheader, tables need to be tables, use <em> for emphasis instead of <i>, etc. Is there a proper difference between divs and spans except one is a block and the other is in-line?
When I was learning I was told that <span>'s were for styling text mid-line. If I had a small blurb of text that I needed positioned at a certain point in my webpage, one that doesn't warrent a <p> tag, would I use a span should I stick with div's? What if that text needs to cover two lines (i.e., it needs a width) if it contains nothing but text, what should I use?
Semantically, neither <div> nor <span> has any intrinsic meaning. They're "catch-all" tags meant to be used with stuff where no existing tag really fits. Use divs and spans as a last resort, if you care about semantics.
The only difference between them is that divs are block-level elements, and spans are inline. Meaning by default, a div will start a whole new block, and technically only inline elements and certain CSS would be allowed inside a span. Most browsers seem to process the tags regardless of the rules (assuming "tag soup"), and you can actually make either act like the other with CSS, but don't do any of that if you care about validation or cross-browser compatibility (which you DO care about, right?).
The primary difference between a span and a div is that a span is an inline element whereas a div is a block element, like a p or paragraph element. So, in essence
span { display: block; }
Is essentially turning all spans into divs. You use a span for just a line of text, like to apply effects or padding or something. Divs are generally for dividing up your web page, so if you had to position a piece of text somewhere I would recommend using a div.
Div is a division block, span is for spanning inline text.
So Div is a box/block with height and width, span is inline. Basically.
If you want to read the spec, here's a link.
The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
<span> and <div> are both very generic elements. In themselves, they have no meaning.
The main difference is that <span> is an inline element. That means if you have something like:
<span>Some text.</span> Some other text
You don't have "Some other text" on a new line. If you replaced the spans with <div> (a block element), there would be newlines. Note that it is not proper syntax to have a block element inside an inline element. Therefore, you can have <span>'s inside <div>'s, but not vice versa.
See here for more:
Wikipedia - Span and div
About.com - Span vs. div
There is a fundamental difference: <div> is a block-level element, while <span> is an inline element. The difference is that block-level elements start and end with line breaks, and inline elements don't.
Perhaps even more importantly, depending on the HTML version, there are different rules for what other elements are valid inside block and inline elements.
Well, to give you a fast and simple answer, DIV is a division! The goal is to use it when certain elements are in need to be treated as a group!
Ex:
Use a div to have a login panel, lets say, hidden # the left side of the screen, that show's up when the mouse hovers the div :)
You've got it. Span = inline, Div = block. That's all.
If a blurb of text needs it's own layout, (You want to put it somewhere on the screen) then it's a div.
If a blurb of text participates in the layout of the other text right next to it, then it's a span.
An inline element can't have its own layout -- then it wouldn't be inline.
Related
In this series they all used a wrapper div.
MDN - CSS GRID Layout
Is this necessary, and if yes, why?
The purposes of wrappers are several, including:
to group elements semantically, for instance to separate page heading
from body text from sidebar from footer.
to group elements cosmetically, such as with a surrounding border or
a common background image or color.
to group elements in layout, such as to keep them all in the same
column when columns are floated next to one another.
to enable special positioning, as when a wrapper is given relative
positioning in order to contain child elements with absolute
positioning.
to make it more convenient to specify elements in CSS and JavaScript
by referring to their parent, without having to id or class each
child element.
(Note: the var above should all be on one line)
So in this case, i think they all used a wrapper div just to group elements in layout.
iframe = Inline?
While debugging some layout problem today I was surprised to see that <iframe> elements have a default display property of inline.
For me this seems strange, especially considering that you can apply a height and width to an <iframe> that is respected by the browser, which should not be the case for a simple inline-element.
So can anyone explain me the reasoning behind this?
Demo
HTML
<iframe id="test"></iframe>
CSS
alert($('#test').css('display'))
https://jsfiddle.net/0tdLr9pq/
Thanks!
Because the HTML4 spec said so:
The IFRAME element allows authors to insert a frame within a
block of text. Inserting an inline frame within a section of text is
much like inserting an object via the OBJECT element: they both
allow you to insert an HTML document in the middle of another, they
may both be aligned with surrounding text, etc.
The "be aligned with surrounding text" part means they shouldn't be block-level by default.
And it's true that, usually, inline elements ignore the height and width properties:
10.3.1 Inline, non-replaced elements
The width property does not apply.
10.6.1 Inline, non-replaced elements
The height property does not apply.
But that's not true for replaced elements, like iframe. This is explained in 10.3.2 and 10.6.2 sections.
IFRAME stand for Inline Frame. See this : http://www.w3.org/TR/html401/present/frames.html#h-16.5
How can I group two divs inside a span (one below other and the div contains text and has a fixed width) and display multiple span like this in fixed width td tag. I am able to do so, but my span are overlapping. If the space in a line is full then the next span should come in next line.
You need to correct your markup.
You are not allowed to place block-level Elements (like div) into inline elements (like span). Doing so will make your markup invalid and mess with the layout, since inline elements have restriction regarding width and margin.
Either declare display:block or display:inline-block on your spans, or even better convert them to divs. This should most likely fix your issue.
I'm trying to get an div with its display property set to inline (or inline-block if I want a margin) to behave correctly in IE (it does in most others).
My situation is this - imagine a workspace in which an item container contains inline items laid out in a horizontal fashion. These items can hold things like text, or images, but also be composite types, say for example a 'fraction', whose numerator and denominator are themselves item containers, containing more horizontal items.
So for example, I might have the HTML:
<div class='item-container'>
<div id='statictext' class='item'>x = </div>
<div id='fraction' class='item'>
<div id='numerator' class='item-container'>...</div>
<hr/>
<div id='denominator' class='item-container'>...</div>
</div>
</div>
Clearly, I don't want fixed width or height for an item or item-container, because they can contain nested content which will increase the amount of space needed (e.g. imagine an fraction inside another fraction), and similarly if I want the width of a static text 'item' to be just big enough to contain the text on one line, i.e. inline.
The problem I think is that it's hard to avoid putting block elements inside my inline 'item'/'item-container' elements, for example the <hr> in the fraction, or if I want say a menu bar at the top of an 'item' that uses the whole width after the width of the rest of the item's contents has been calculated.
I know it's invalid syntax to put an actual block item inside an inline one, although setting the block element's display attribute to inline or inline-block makes things behave correctly in Firefox/Chrome at least. But alas, not in IE.
Is there an adequate fix?
EDIT: I actually used inline-block (with the appropriate IE hack) for 'item' and 'item-container' to get it to work spiffingly in Firefox et al, but IE still treats them as inline, which then subsequently gets converted into block because one of its children is a block.
Don’t use <hr>. You can draw a line using text-decoration: underline or using a bottom border or using an image (say, a one-pixel image stretched to the desired width). Then you can work with inline elements.
Hi I have some hyperlinks inside a div with display:block. Problem is that the hyperlinks length when clicked is equal to the div's width. How do I make the hyperlink's clicked length equal to the text of the hyperlink only without specifying width for each link ?
JSFiddle here
Use
#links a {clear:left;float:left}
The float will allow the link to be sized, and the clear will prevent the links from being on the same line.
You may need to add a clear:left to the #links container depending on your design.
EDIT
A little tutorial since you asked:
There are two types of elements, inline and block. Inline ones show in a line with no breaks. Block elements take up the whole line and move to the next one.
Inline elements can't have their width or height styled. Blocks can.
<a> is an inline element. By setting its display to block, you tell it to make a new line every time.
float gives elements inline behavior so they bump up next to eachother and flow over onto the next line. float also allows you to style the width/height of the element. It's sort of a mix between the two.
The clear attribute stops the inline floating and goes back to normal block behavior (new lines every time).
You won't need display:block and float: at the same time.
Another solution would involve display:inline-block, but this is not supported in several browsers so isn't encouraged (although I find it pretty handy).
set the link style to display:inline-block; (not supported in elder IE6) or float it with float:left; or float:right;
display: block; is what makes the link elements expand to their parent width. By default, link elements are in-line elements, not block elements.
Simply remove that declaration and your problem should be gone.
JSFiddle example
Do you mean something like this:
Foo
width:auto?
Or try
display:inline;
on the links
it shouldnt get the divs width then