0

Please see the HTML code below:

#search
{
    display:inline;
    margin:100px;
}
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    
    <span class="child">
        <input type="text" name="submit" id="submit">
    </span>
    
    <span class="child">
        <input type="text" name="search" id="search">   
    </span>
  </body>
</html>

enter image description here

If I change the two span elements to divs then I see this:

enter image description here

The div result (second screenshot) is what I would expect, however it involves nesting an inline element (input) inside a block level element (div), which I believe is illegal.

Why does the top margin of one element (id of: search) also affect another element (id of: submit) when using spans?

I have spent a few hours Googling this and understanding the difference between spans and divs, however I have not found an answer. There was another question on here similar with a comment from someone that just said: "collapse it".

MaxiGui
  • 6,190
  • 4
  • 16
  • 33
w0051977
  • 15,099
  • 32
  • 152
  • 329
  • Does this answer your question? [What is the difference between HTML tags
    and ?](https://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span)
     – MaxiGui Sep 03 '20 at 08:51
  • the keyword is *baseline alignment* – Temani Afif Sep 03 '20 at 09:30
  • @MaxiGui please don't make useless edits like so. Check if the code runs in the debug window. I'm not talking specific to this question, but to other ones you have edited. I'll delete this if you confirm that you hear me :). – 10 Rep Sep 04 '20 at 03:44
  • @10Rep ok you can delete this message too – MaxiGui Sep 04 '20 at 05:53

1 Answers1

2

span is an "inline level" element, while div is a "block level" element.

In terms of HTML, "block level" means that, the element will take full available width of the viewport of browser.

So, in your case, when you use <span> and you make one of them a 100px higher, because of margin property, the browser aligns another element to the current baseline (basically, it means vertical alignment to the bottom of "text line"). You can play with vertical-align property on both span's to see the effect.

When you use <div>, the browser makes each div on its separate line and as such second div gets margined without affecting the first one.

Btw, if you'll set display: inline to div tag you will get the same results as for span's

spirit
  • 3,265
  • 2
  • 14
  • 29