3

I am assuming it is inline or block but I wanted to verify it in the documentation and could not find it on MDN.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

I am using input with type set to text.

howard
  • 234
  • 1
  • 11
  • It's an inline element. – no ai please Aug 24 '21 at 04:15
  • ***Please don't use w3schools.com. Their content is really out of date!*** – no ai please Aug 24 '21 at 04:15
  • Thanks updated, I am looking for documentation. It appears to be inline after I created a fiddle and looked, but where is the documentation? – howard Aug 24 '21 at 04:17
  • You should be looking for the documentation about the default display value of each HTML element. So, don't look for the `input` element, but focus on the `display` default values. – Adriano Aug 24 '21 at 04:20
  • According to web dev simplified's tutorial, every element is by default inline-block. It all matters is how the browser renders it. So, in chromium based browsers, input tag is inline by default and h1 is block by default. – Aviral Aug 24 '21 at 04:47

1 Answers1

8

The official specification states an input element is displayed as inline-block.

This is the default stylehsheet:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

You can find all specifications here.

Sujal Singh
  • 532
  • 1
  • 5
  • 14
  • 1
    How did you find this? What did you google? Is it up to date? Thanks! – howard Aug 24 '21 at 04:31
  • I am building a browser, so I looked around on how to do that and found out that organizations like w3c, whatwg write specifications for browsers to follow. Yes this is up to date, this is the official specification that all browsers follow. The link I attached in the answer is basically a snapshot for the all the specifications in 2020, since 2021 has not ended there is non yet for 2021. Btw here's [my browser](https://github.com/sujaldev/skylon2) – Sujal Singh Aug 24 '21 at 04:38
  • 1
    That list is definitely not up-to-date. For example, the `main` element is `display:block` but is not listed there. – Alohci Aug 24 '21 at 07:19
  • @Sujal ... thanks again ... if I learn python one day I will look at your code. – howard Aug 25 '21 at 02:42
  • Hi, I looked into the being up-to-date part, it seems like the stylesheet in the answer is for HTML4, but from what I know about these specifications, older specs are superseded and not overridden (i.e. this specification might not contain all elements but I _think_ what it has is correct). I might be wrong (I am new to these specifications) but the most latest one I could find with the `main` element in it is [here](https://html.spec.whatwg.org/multipage/rendering.html#non-replaced-elements). It's not one big stylesheet like in the answer, rather it is split into separate sections. – Sujal Singh Aug 25 '21 at 13:36
  • @howard and whenever you need help finding a standard such as the one in the question, there is an official [chat room](https://app.element.io/#/room/#whatwg:matrix.org) to help you out! Super helpful people there. – Sujal Singh Aug 25 '21 at 13:45
  • @Sujal - Thanks! – howard Aug 26 '21 at 04:38