This question already has answers here:
Get rid of spaces between spans
(6 answers)
Wrapping character "Y" in span, increases the margin to next character
(3 answers)
Closed 6 years ago.
<p>
<span>cancel</span><span>comfirm</span>
</p>
<hr>
<p>
<span>cancel</span>
<span>confirm</span>
</p>
hey should show me the same result. but in the second template, after rendering, there is 'space' between 'cancel' and 'confirm'.
tags are inline elements so the line break will no use.
i can float them both with CSS.
but, i don't know the reason. i just think block tags will have space.
ref img
Note: OP edited his question after it was answer, still, answer is
applicable, he just changed the order of DOM hence now his image is
correct.
I think your image is incorrect. It should be showing white space in the first p element and not the second one. As span is an inline element, it will result in whitespace being rendered by browsers when you have a line break between inline elements in your source.
You can hack that in several ways by putting those elements in a single line in your source code which you are already doing in your 2nd example, or you can use font-size: 0; on your parent element and re-set font-size for child elements, or you can put an empty comment like this.
Span is for a group of text that you'd like to apply a similar style to. Span by default has no style applied to it. Span is generally used for styling to specific part of data. Span is not rendered as anything or something on browser.
Related
This question already has answers here:
Is there a reason why CSS doesn't support ids and classes, starting from numbers?
(8 answers)
Closed 7 years ago.
Here's a strange one. This seems pretty simple but just isn't working.
Fiddle
I have images within a container. Images with class="1" should take up the full width of the container div. Images with class="2" should be able to fit 2 images side by side, taking up the full width of the container div. Images with class="3" should be able to fit 3... you get the idea.
However, even though the classes are being applied (inspect the elements!), the styles are not. The only thing that seems to work is a general style for #container img, which Iyou can test in the fiddle by removing the ".1" or ".2" from either style. As soon as you add .1, the images no longer take on the style, even if they are class="1"!
All I can think tis that maybe tags don't support the class attr? But I don't think that's true.
CSS class selectors cannot start with a number.
Use an attribute selector or (more sensibly) better class names.
The problem is that
In CSS, identifiers [...] cannot start with a digit.
That means that class selectors can start with a digit, but you must escape it properly.
To escape a digit d, you can use \00003d or \3d (note the whitespace).
For example,
.\31 {
background: #0f0;
}
<div class="1">Foo bar</div>
This question already has answers here:
HTML element which defaults to display:inline-block?
(10 answers)
Closed 8 years ago.
I'm well aware of applying display: inline-block; in CSS, but I'm curious if there is a HTML tag that displays as inline-block by default. Complementary to div & span.
div = block
span = inline
??? = inline-block
In the case that there is not a default tag, would be ok to create my own tag?
Ex)
<indiv></indiv>
indiv { display: inline-block; }
the only html elements with default style of inline block are button, textarea, input, and select . About creating your own tag, there are ways to do it, but think that most browsers will miss it.
Additionally, you can play with rarely used elements, like hr or i. Simply change the attributes for these elements and make them work as you want. This is very common in Bootstrap, where th <i> tag is used to display icons in the nav
By the way, can't understand why when you can simply add a class to any element, apply the inline-block style and be a happy man. But well, there goes the answer to your question.
Note: Marquee is also an inline-block element, but it's obsolete in HTML5. However, if you are one of those still using HTML4.x or XHTML, maybe it's of use
This question already has answers here:
Why can't the <p> tag contain a <div> tag inside it?
(6 answers)
Closed 9 years ago.
When you put <p><div></br></div></p> into body, you will get the strange DOM structure like:
<p></p>
<div></br></div>
<p></p>
Why does this happened? It seems that when <p> contains a block element this will happen.
According to the spec, p cannot have nested block elements, so the HTML parser automatically closes it before the div when building the DOM.
p cannot hold a div as it's a block level element, p can only hold inline elements, so what you are trying is incorrect.
You can use span instead and use display: block; or display: inline-block; in your CSS which will give you same effect and also it is completely acceptable as p can hold a span as it's an inline element.
This question already has answers here:
What is the difference between HTML div and span elements?
(13 answers)
Closed 9 years ago.
I had a doubt in my mind that what are the differences between these :-
<div> TEXT </div>
<span> TEXT </span>
In simple words div is a block element and span is inline element.
Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
and inline element
Generally, inline elements may contain only data and other inline elements.
Block Level elements & Inline Elements
<div> is a block element and <span> is a inline element.
These links help you to understand the inline and block elements.
http://www.impressivewebs.com/difference-block-inline-css/
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm
DIV is typically for a block element where as span is an in line element.
So you typically do something like
<p>This word is <span class="blue">blue</span></p>
You should probably not do
<span class="blue">
<div class ="layout">
<p>Content</p>
<img src = "this.jpg" />
</div>
</span>
Now, there is the CSS attribute called display which will allow you to display a div in line (display:inline;) which can cause further confusion since visually it may let you display the same render with either tag. Whether the code is 'correct' or not may or may not mean you get desired results in your browser! Typically, the results probably are what you want but the issue may occur when the site becomes bigger and you then realise something is not right and have to fix it at a later stage!
Any way, W3Schools define it as
The tag is used to group inline-elements in a document.
The tag provides no visual change by itself.
The tag provides a way to add a hook to a part of a text or a part of a document.
Source
And
The tag defines a division or a section in an HTML document.
The tag is used to group block-elements to format them with CSS.
Source
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What is the difference between HTML tags DIV and SPAN?
I'd like to know the difference between using <span> and <div> when writing a one line text other than the div is a block styling container while a span doesn't leave a space after it.
Is there something related to text-overflow that we should use span for it ?
I'm searching for other differences but I can't find.
From a styling perspective, <span> defaults to display: inline and <div> defaults to display: block. There are no other CSS differences.
(They have different rules for what elements may be contained by them, and what elements may contain them, but that is unrelated to CSS).
Per Wikipedia:
There is one difference between div and span. In standard HTML, a div
is a block-level element whereas a span is an inline element. The div
block visually isolates a section of a document on the page, in the
same way as a paragraph. The span element contains a piece of
information inline with the surrounding text. In practice, even this
feature can be changed by the use of Cascading Style Sheets (CSS).
Sorry to burst your bubble looking for something more special.
Well, the block level vs. inline level property of these elements is the major difference between the two.
What you should consider is what else besides text is going to be in each. It's perfectly valid to put inline elements as well as other block elements in a block element, however it is only valid to put other inline elements in inline elements.
More reading here: http://www.w3resource.com/html/HTML-block-level-and-inline-elements.php
As far as which to use for writing a "one line text", I would probably use neither. A paragraph, or <p>, tag seems best suited for that. Semantically, a paragraph tag is used to display a paragraph of text, whereas a <div> is semantically used to display a block of something... paragraphs, lists, images, forms, etc. Meanwhile, a <span> is semantically used to display something that doesn't quite fit into another element. Maybe you have a paragraph and want to apply some special formatting to just one part of a sentence, for example... a <span> would be a good way to do that.
<span> has no block properties, thus there is no line break at the end, whereas a unmodified(default block element) <div> tag is a block element and will include a line break at the end of the div tag.
http://www.w3schools.com/tags/tag_div.asp
http://www.w3schools.com/tags/tag_span.asp