CODEWITHSUNDEEP
htmlcss
w0051977
w0051977

Reputation: 15787

Understanding inline elements?

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:

my inline elements

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:

  1. 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.
  2. If the group of elements contain all inline elements then use a SPAN.

Upvotes: 0

Views: 152

Answers (1)

Temani Afif
Temani Afif

Reputation: 272703

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

Upvotes: 2

Related Questions