This question already has answers here:
Is putting a div inside an anchor ever correct?
(16 answers)
Closed 9 years ago.
If I place a div element inside an anchor element, it invalidates my HTML.
What is the reason of not placing block level elements inside inline elements ?
If I place a div element inside an anchor element, it invalidates my HTML.
This is not true as of HTML5.
What is the reason of not placing block level elements inside inline elements?
The HTML specification describes which elements may contain other elements. "Flow content" can often contain "Flow Content", or "Phrasing Content", but even this is not always the case. For example, a p element is a block level element, but it may only contain "Phrasing Content".
Related
This question already has answers here:
What is the difference between HTML div and span elements?
(14 answers)
Closed 2 months ago.
there are two tags in html , one is div and another one is span.. now I wish to know the difference between these two tags according to their functions and roles...
I tried both the tag but I didn't found any unique difference between both, so I am expecting to get the detailed answer .
Div element defines a section in a document (block-level).
Span elememt also defines a section in a document (inline).
So what's the difference between block-level and inline.
There are two types of elements in html.
Block-Level Elements.
Inline Elements.
Block-Level Element always starts on a new line and takes up the full width as possible.
Inline Elements doesn't starts on a new line and takes up as much width as necessary.
You cannot put a block-level elememt into an inline element.
Div is a block-level element and Span is an inline element.
Could you please explain this rule of floating elements when combined with inline elements?
"The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document".
If you could give me a simple example that would be great, actually my more specific question is that, does the statement apply when the inline elements are siblings of the floated elements?
I also know that all elements when inline become block level when floating, but that's not my question.
The question seems too technical for me to understand.
This question already has answers here:
What is the difference between HTML div and span elements?
(13 answers)
Closed 4 years ago.
I know there are lots of documents on span and div but I really understood how it happens with styling part. Unless styling do we have anything change with span and div tags in HTML where the behaviour of the application changes a lot?
span element is in-line and usually used for a small chunk of HTML inside a line like inside the tag where as is used for block-line. div tag also uses line-break before and after tag.
span element is inline element it means it only takes the minimum or required space for content
see the output of span element(inline level)
while div element takes full space (100%) because it is block level element
output of div element (block level)
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 :-)
A span is an inline element and div is a block element. Is there a 'native' (X)HTML / HTML5 inline-block element that can act like a container? (Without applying CSS)
Definitions:
block This value causes an element to generate a block box.
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. inlineThis value causes an element to generate one or more
inline boxes.
No, there is not. You have to specify inline-block explictly.
Strictly speaking <button> fulfils the criteria set. HTML5 says
When the button binding applies to a button element [which it ordinarily does], the element is
expected to render as an 'inline-block' box rendered as a button whose
contents are the contents of the element.
However while it is a container element that has a default inline-block rendering, it is not a General Purpose container so can't be used for anything but as a button.
iframe is also inline-block too