Understanding inline elements?

Question

Please see the HTML below:

  <!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<span class="child">
    <input type="text" name="submit" id="submit">
    <input type="text" name="search" id="search">   
</span>
</body>
</html>

and the css below:

#search
{
    display:inline;
    margin:100px;
}

It does seem to be respecting the top and bottom margin as shown below:

Why are the top and bottom margins respected? This question seems to suggest that inline elements should not respect the top and bottom margins: Why margin top and bottom is missing?

Also, I am tring to understand when to use a div and when to use a span and have come up with this:

If the group of elements contain at least one block level element then use a DIV. This caters for the scenario where the group of elements contain block level elements and inline elements and also caters for the scenario were the group of elements only contain block level elements.
If the group of elements contain all inline elements then use a SPAN.

*This question seems to suggest that inline elements should not respect the top and bottom margins* --> input is a replaced inline element, the restriction apply to non-replaced inline elements — Temani Afif, Sep 02 '20 at 13:15
related: https://stackoverflow.com/q/55358492/8620333 (same thing happen to width, height) — Temani Afif, Sep 02 '20 at 13:18

score 2 · Answer 1 · answered Sep 02 '20 at 13:25

From the specification

These properties have no effect on non-replaced inline elements.

input is a replaced inline element (https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements)

I am tring to understand when to use a div and when to use a span

There is no generic rule, the only rule you need to know is to never put block element inside inline element. This will lead to some unexpected and non intuitive behavior

Understanding inline elements?

1 Answers1