My UI shows a list of email addresses retrieved by backbone. It is currently rendered as a span of spans that contain spans. Here's some typical generated html:
But I am getting breaks inside the spans (notice the beginning of angelstwo is on two lines), probably because I am using the wrong html tags (ul and li sounds better for a list). It can look like this:
I tried divs but I got one entry per line and I don't want that.
Is there something I can do to make this work with spans? Or should I change to something else like ul and li?
span elements are, by default, inline elements. In an inline formatting context boxes can wrap. (This is what happens to text when it wraps around a floated image.)
div elements are, by default, block elements. In a block formatting context the boxes will occupy all available horizontal space (width: 100%).
This is why your spans and divs aren't working as you want.
If you switch from display: inline to display: inline-block, you'll get block-level like behavior, which will prevent wrapping line boxes, but elements will stack horizontally with other inline elements.
W3C References:
9.2.2 Inline-level elements and inline boxes
9.2.1 Block-level elements and block boxes
Related
Why do we say that the display property of floated elements may change to block level, instead of saying inline-block, because it starts taking the space according to the content it wraps?
inline-block means inline level, block container.
inline-level elements participate in the layout of a line (or multiple lines). This affects line spacing and the vertical alignment of other elements in the same line.
Floated elements do none of that. The participate in block formatting contexts, not inline formatting contexts.
That is the purpose of float. found some information in here
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
Also
when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.
This question already has an answer here:
What goes wrong when a display:inline custom element contains display:block elements?
(1 answer)
Closed 6 years ago.
Can anyone point me to specs?
x-x {
padding: 10px;
}
<x-x>
<div>1</div>
<div>2</div>
</x-x>
padding-left does not pad
however, padding-top and padding-bottom does
why is this?
http://codepen.io/geoyws/pen/NNJjPV
Your custom element (<x-x>) defaults to CSS initial values. So its display value is inline.
This element contains two divs, which are block-level elements.
Because an inline box cannot wrap a block-level box, the browser implicitly closes the <x-x> before it wraps the div.
Hence, the reason the left padding is not working is because the custom element is not actually wrapping the two divs. It's closed right before the first opening <div> (in effect, making the custom element and the divs more like siblings).
However, if you put a span in the custom element, the padding will work, because a span is display: inline by default, and it can be wrapped by another inline-level element (demo).
All this can be verified in dev tools. Highlight the custom element to see that it doesn't wrap the divs.
As described in the spec, inline-level boxes "break around" block-level boxes:
9.2.1.1. Anonymous block
boxes
When an inline box contains an in-flow block-level box, the inline box
(and its inline ancestors within the same line box) are broken around
the block-level box (and any block-level siblings that are consecutive
or separated only by collapsible whitespace and/or out-of-flow
elements), splitting the inline box into two boxes (even if either
side is empty), one on each side of the block-level box(es). The line
boxes before the break and after the break are enclosed in anonymous
block boxes, and the block-level box becomes a sibling of those
anonymous boxes. When such an inline box is affected by relative
positioning, any resulting translation also affects the block-level
box contained in the inline box.
You have set padding to x-x by 10px which having display: inline; by default where as the display property of its child is display: block; So by just adding display block to parent i.e. to x-x element along with padding: 10px; you will get your expected result.
x-x {
padding: 10px;
display:block;
}
Happy coding :-)
What is the difference between a DIV with display: inline-block and a SPAN ?
Simalarly, between a SPAN with display: block and a DIV.
There will only be a semantic difference per se between the two, given the correct styles, both will probably display the same.
However, some browsers may or may not display correctly. Also, you can't nest block elements in spans, that is invalid HTML, and may cause some browsers to choke or display incorrectly.
Divs are block elements, spans are inline elements. Don't do that is the bottom line, it will make things messed up.
Also, spans have the style display:inline, not display:inline-block
From the W3 Specification:
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline
This value causes an element to generate one or more inline boxes.
You can see how they differ visually here.
First and foremost, a span, by default is display:inline.
According to w3schools, the difference between display:inline and display:inline-block is
An inline element has no line break before or after it, and it
tolerates HTML elements next to it.
A block element has some whitespace above and below it and does not
tolerate any HTML elements next to it.
An inline-block element is placed as an inline element (on the same
line as adjacent content), but it behaves as a block element.
What is the default behaviour of a div?
I noticed that even if a put a width for a div let's say 100px,
if i put a 2nd div with the same width will put it on the second line.so by default doesn't matter the width. it puts it on different lines?
in this case i understand the need of float.
I thought that any element i put in a html page,they will be side by side unless i add a break element or paragraph or something with that role.
Or maybe i do not use it correctly the div for this kind of alignment,but i really want to
clarify this for good.
A div element is, by default, display: block.
This value causes an element to generate a block box.
The rendering of them is described here
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.
Block-level boxes are boxes that participate in a block formatting context.
and then here
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
To stop this kind of rendering, you can use float to cause block level elements to bubble up beside each other. You can also modify the display property of the div.
Divs are block-level elements which mean they stack...like blocks. Although it sounds reasonable that since the width would allow them to fit side-by-side without a float, this is not how they are designed to behave.
If an element is an inline element as opposed to a block, its behavior is to fit side-by-side. You can force this behavior on a div if you would like by tying the two ideas together. You can do something like:
<div style="display:inline-block"></div>
This will allow the div to maintain its other block properties but allow it to fit inline as text and images would and, if this the your desired goal, avoid the use of float.
The DIV by default takes 100% of the screen, even if you set it width the space on the right cannot be occupied by anything.
Try this:
The way to have two div on the same line would be to make them float:
<div style = 'float:left;width:500px;background-color:red;color:white;'>Hey</div>
<div style = 'float:left;width:100px;'> There</div>
Here's my doubt. If I float an inline element, since it's display is automatically set to block, and since siblings of block level elements have to be themselves block level elements(anonymous ones if they must), shouldn't in the example below, the first and second anonymous blocks be placed on separate lines as block level elements do by default?
<p>
This will be the first anonymous block, <span style="float: left;">this will
be the span</span>, and this will be the second anonymous block.
</p>
See my demo: http://tinkerbin.com/5niDbThT
Notice that when I directly set the display to block on the span of the second paragraph, three different block level elements are created - just as I imagined it would happen when floating.
My guess is that floating is simply an exception that doesn't trigger the effect. But you tell me ;). Thanks in advance!
Floats take the object out of the document flow which is why it shows up as it does.
Inline-block: "The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element"
You can also "clear" dom elements which pushes the element past the floated object. Most commonly used in a layout with a main area and a right/left column side by side.
So I thought about your question and the implications for a while and this is the conclusion I've come to:
So according to the W3 CSS spec, http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#floats, "Content flows down the right side of a left-floated box and down the left side of a right-floated box." So what the first example span in your tinkerbin is doing is perfectly normal; it's what is supposed to happen when a floated element comes in contact with any content. Actually in your tinkerbin you didn't set the span with display:block as float:left, so it just created a scenario where the other elements have to be treated as block-level, as you mentioned.
If you do apply float:left to span-2, you get the same result as span-1.
I edited your tinkerbin and put in a div structure: http://tinkerbin.com/NoOqLU4O which uncovers additional weirdness. It seems to treat text before the div as a block but text after it as content. Who knows?
Bottom line I think that you're right, floating is an exception that doesn't trigger the effect because it's hard to put a finger on what exactly is "content that should wrap to the float" when your float itself is content..