2

.separator {
    border: 1px solid #000000;
    margin: 10px;
}
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>Separator</title>
    </head>
    <body>
        <div>
            <span>hello</span>
            <span class="separator"></span>
            <span>world</span>
        </div>
    </body>
</html>

I wonder why <span class="separator"></span> do not have margin-top and margin-bottom? The following two pictures can clearly describe my problems.

You can see separator's border is from top to bottom:

Separator border

But console shows that margin-top and margin-bottom are both 10px:

Console

So where are the margin-top and margin-bottom?

misterManSam
  • 24,303
  • 11
  • 69
  • 89
hellozjf
  • 169
  • 5
  • 16

4 Answers4

8

Top and bottom margins do not affect inline elements because inline elements flow with content on the page. You can set left and right margins/padding on an inline element but not top or bottom because it would disrupt the flow of content. You can set margins on block (or inline-block but it will only look right if you set the vertical align right) because block level elements disrupt the flow of content.

This is from the CSS2 specification on inline formatting of elements:

In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.

emptyjayy
  • 494
  • 4
  • 10
1

Span is an Inline element so the margin has no effect vertically(top and bottom). Enclosed your span inside DIV to use horizontal margin.

.margin {
  margin: 10px 0 10px 0;
}
.separator {
  border: 1px solid #000000;
  margin: 10px;
}

<div class="margin">
   <span>hello</span>
   <span class="separator"></span>
   <span>world</span>
</div>
Jhay
  • 76
  • 6
0

<span> tags are default using inline display property, and because of that they don't respect vertical margin, they only respect horizontal margin., see the below reference

Section 9.2.4 of the CSS2 specification states:

inline This value causes an element to generate one or more inline boxes. Further on in the CSS2 specification (section 9.4.2) we get told that inline elements only respect horizontal margins

Block-level elements respect both horizontal and vertical margins whereas inline-level elements only respect horizontal margins.
so if you change your property with inline-block then it will respect that, but then you need to do some further styling in order to achieve the vertical bar.

user2809299
  • 149
  • 2
  • 13
0

try this

body{padding:0;margin:0;}
.separator {
border: 1px solid #000000;
margin: 10px;
display:inline-block;height:20px;vertical-align:middle
}
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>Separator</title>
    </head>
    <body>
        <div>
            <span>hello</span>
            <span class="separator"></span>
            <span>world</span>
        </div>
    </body>
</html>
sayyednoman
  • 9
  • 3