According to CSS docs:
The width CSS property ... applies to all elements but non-replaced inline elements, table rows, and row groups
Input is inline element. So why width property is work with input element?
The exception is for non-replaced inline elements. Input is a replaced element.
Replaced element
In CSS, a replaced element is an element whose representation is
outside the scope of CSS. These are kind of external objects whose
representation is independent of the CSS. Typical replaced elements
are <img>, <object>, <video> or form elements like <textarea> and
<input>. Some elements, like <audio> or <canvas> are replaced elements
only in specific cases. Objects inserted using the CSS content
properties are anonymous replaced elements.
CSS handles replaced elements specifically in some cases, like when
calculating margins and some auto values.
Note that some replaced elements, but not all, have intrinsic
dimensions or a defined baseline, which is used by some CSS properties
like vertical-align.
Reference: MDN - Replaced element
Related
This shows that "display" is initially "inline" for all elements:
https://www.w3.org/TR/css-display-3/#the-display-properties
However, this says "(and assuming the DIV and the P both have 'display: block')":
https://www.w3.org/TR/CSS2/visuren.html#block-level
I did see this question that shows that the browser sets the default display value.
Difference between HTML block elements and CSS display block property.
Q. How does this reconcile with the CSS Spec. statement that "display" is initially "inline" for all elements? Does the CSS specification statement about "initially inline" refer to the state before the browser sets display:block for block-level elements?
Does the CSS specification statement about "initially inline" refer to the state before the browser sets display:block for block-level elements?
It refers to the default value of a property if nothing is defined including any browser default style.
Each property has an initial value, defined in the property’s definition table. If the property is not an inherited property, and the cascade does not result in a value, then the specified value of the property is its initial value. ref
The fact that you can read "(and assuming the DIV and the P both have 'display: block')" confirms the logic because the Specification is not telling you that p and div should be or are block elements but let's assume they are block element for the sake of the explanation that comes next.
div and p are flow content (WhatWG) and thus presumably have "display: block" by default.
"Flow content" and "display: block" are not linked together. Some elements are flow content but they don't have "display: block" like a, span and many others.
The content models has nothing to do with the display value.
I want to know if block-level, parent elements are technically-required for inline elements in an HTML document. For example, the following HTML...
<html>
<head>
</head>
<body>
<b>Some Text</b>
</body>
</html>
Is this a valid HTML document? Or must the <b> and </b> tags be encapsulated in a block-level element to be considered valid, like <p> or <div>? (Hopefully the answer is the same for HTML4 and HTML5?)
Many people ask a similar question: Can I place a block-level element inside an inline element? I want to know the opposite: Can inline elements go anywhere besides in a block-level element in an HTML document?
I am seeing this in an RFC:
Certain HTML elements that may appear in BODY are said to be "block-level" while others are "inline" (also known as "text level")....
Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. https://www.w3.org/TR/html401/struct/global.html#h-7.5.3
But, it doesn't totally come out and say it.
You can place a inline element anywhere, inside a block level, outside, wherever, even outside of the body if you wanted to! They'll render just the same, only without any padding/margin that you would expect of block level elements.
In the MDN reference for inline elements, they are always - in the two examples give - shown inside of block-level elements, but that doesn't mean that they can't stand alone, outside of a block element. It just means that it generally isn't done because it is sematically wrong - ie, you have block level elements that contain inline elements, not lone-standing inline elements.
Although technically, the example you provided is not an example of an inline element outside a block element because the body is a block element.
I need to display some text before and after the input tag using CSS content.
Using the following code I am not able to obtain the desired effect on the input tag, but works fine of a tag.
What am I doing wrong? How to fix it?
http://jsfiddle.net/pgdu2tue/1/
<input id="test" type="text" name="nametest">
<br>
<a id="moz" href="http://www.mozilla.org/">Mozilla Home Page</a>
#moz::before {
content:"XXX" ;
}
#test::before {
content:"BEFORE" ;
}
#test::after {
content:"AFTER" ;
}
It doesn't insert content before or after using ::befoer & ::after because there is no content in an input tag. Read a similar post here
This is not due to input tags not having any content per-se.
input elements are a special type called replaced elements, these do not support :psuedo selectors, as they are outside the scope of CSS.
In CSS, a replaced element is an element whose representation is
outside the scope of CSS. These are kind of external objects whose
representation is independent of the CSS. Typical replaced elements
are <img>, <object>, <video> or form elements like <textarea>
and <input>. Some elements, like or <canvas> are replaced
elements only in specific cases. Objects inserted using the CSS
content properties are anonymous replaced elements.
Note that this is even referred to in the spec
This specification does not fully define the interaction of :before
and :after with replaced elements (such as IMG in HTML).
Encountered the following while reading the height property of CSS2 specification:
Applies to: all elements but non-replaced inline elements, table columns, and column groups
I understand what replaced element(<img>) or inline element(<button>, <a>) are, but having trouble finding out examples of non-replaced inline elements.
For most practical purposes, it is best to read “replaced” as “embedding”. So “non-replaced element” is just an element that is rendered as such, instead of causing some external content to appear in its place.
The expression “non-replaced inline element” has no definition of its own: it simply refers to any element that is both a non−replaced element and an inline element. Such as <a>. Most elements in HTML are non-replaced. A non-replaced element is simply an element that is not a replaced element.
However, in CSS specifications, there are just general characterizations the concept “replaced element”, not any definitive list of such elements. This is understandable, since HTML evolves rather independently of CSS.
The concept has somewhat changed over time. The CSS 1 spec said: “In HTML, IMG, INPUT, TEXTAREA, SELECT, and OBJECT elements can be examples of replaced elements.” In newer specs, form fields are not included any more. This is reflected in the HTML5 draft, where the Rendering section explicitly lists form controls under Non-replaced elements. The only replaced elements, according to it, are those that embed external content, such as an image, video, applet, or HTML5 canvas into an HTML document – except that the revamped menu element is mentioned too (it is expected to be implement in a manner that echoes browser controls, so it sort-of embeds external content too).
This change reflects browser development. Early browsers implemented form fields using system routines in a manner that was immune to anything in CSS, and there are still some remains of such approaches, but nowadays form fields can mostly be formatted with CSS, so they have effectively changed from replaced to non-replaced elements.
David Baron discusses this on his website here.
There are two types of inline elements: replaced inline elements and
non-replaced inline elements. In general, non-replaced elements are
those whose content is contained in the document, whereas
replaced-elements are those whose content is outside of the document.
For example, in the code:
Visit the World Wide Web Consortium
to learn about... the content of the a element is "World Wide Web
Consortium". Replaced elements are those where the content comes from
some external source, for example, an object or img element.
However, as far as the inline box model is concerned, the definitions
are as described above except that elements with display types
inline-table and inline-block (the latter is a proposed type for CSS3
to accommodate form elements) are considered replaced elements.
Good examples of non-replaced inline elements are span, strong, i, b, em, etc.
You can find the definition of a replaced element in the index:
An element whose content is outside the scope of the CSS formatting
model, such as an image, embedded document, or applet. For example,
the content of the HTML IMG element is often replaced by the image
that its "src" attribute designates. Replaced elements often have
intrinsic dimensions: an intrinsic width, an intrinsic height, and an
intrinsic ratio. For example, a bitmap image has an intrinsic width
and an intrinsic height specified in absolute units (from which the
intrinsic ratio can obviously be determined). On the other hand, other
documents may not have any intrinsic dimensions (for example, a blank
HTML document).
User agents may consider a replaced element to not have any intrinsic
dimensions if it is believed that those dimensions could leak
sensitive information to a third party. For example, if an HTML
document changed intrinsic size depending on the user's bank balance,
then the UA might want to act as if that resource had no intrinsic
dimensions.
The content of replaced elements is not considered in the CSS
rendering model.
A non-replaced inline element is something that is inline and does not conform to the above. Roughly speaking, it is an element containing (or that can contain) text that can be styled normally. (a, b, cite, def, em, etc)
A block level element as defined by the W3Schools has having a line break before and after the element, such as p, h1, etc. Non nested inline elements either start on their own line (no line break) or remain on the same line if nested.
While span behaves normally (as well as all other inline elements). Div never creates line breaks like block elements all do, but only starts on a new line at the opening of the div element.
Perhaps I'm missing something since everyone talks about DIV being block level, but it behaves like an inline element in that it starts a new line if not nested, doesn't create line breaks, but acts like something else entirely that when a div is nested with another div it just creates a new line.
Is DIV the only "hybrid" element like this? Am I missing something more fundamental?
No elements create line breaks. You're merely seeing the effects of different default styles, which have different margin and padding values. The default styles vary per browser, but often look something like the [very dated] reference stylesheet included with the HTML 4 spec: http://www.w3.org/TR/CSS2/sample.html
The Mozilla Developer Network, or MDN, is the best place to learn about HTML.
There is an explanation of <div> here: div | Mozilla Developer Network:
The Document Division (<div>) HTML element is generic container for flow content, which does not inherently represent anything.
It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang.
It should be used only when no other semantic element (such as <article> or <nav>) is appropriate.
Here is the comparison between block-level and inline elements:
Block-level elements:
The differences between inline and block-level elements are:
Formatting
By default, block-level elements begin on new lines.
Content model
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.
Inline elements:
Differences between inline and block-level elements:
Content model
Generally, inline elements may contain only data and other inline elements.
Formatting
By default, inline elements do not begin with new line.