0

.outline-1 { outline: darkred 2px dashed; }
.outline-2 { outline: aqua 2px dashed; }
.outline-3 { outline: blue 2px dashed; }
body { margin: 0; padding: 50px;}
.wrap { margin: 0; padding: 0; background-color: white;}
.one, .two {
  margin-left: -15px;
  margin-right: -15px;
}
.oneone, .twotwo {
  display: block;
}

.no-margin {
  margin-left: 0;
  margin-right: 0;
}

.block-text:before {
  display: block;
  content: '[block]';
}

.inline-text:before {
  display: inline;
  content: '[inline]'
}
<div class="wrap outline-1">
  <span class="one outline-2">
    <div class="oneone">aaa bbb</div>
  </span>
  <span class="two outline-3">
    <div class="twotwo">bbb aaa</div>
  </span>
</div>

Why non-zero margin (left of right) causes a line-break before span.one starts? The line-break disappears when you apply .no-margin to span.one or span.two.

I guess it's the child div that causes the line-break, but cannot know why it happens only if both left- or right-margin is non-zero.

+ The line-break disappears when you apply .no-margin to span.one or span.two. ← This is the topic of this question. I know how line-break appears, but not how line-break disappears

This is not duplicate of this question. That does not explain why the zero-margin removes line-break.

Jinux
  • 174
  • 1
  • 1
  • 12
  • 4
    Don't put block elements like `div` inside of inline elements like `span`. – str Dec 03 '17 at 16:21
  • I won't use that pattern in actual projects. I'm curious about how they works. Or is it browser specific? – Jinux Dec 03 '17 at 16:27
  • 2
    While it's true, the problem here is not with improper DOM nesting, but with improper CSS box nesting. Putting `span` with `display:block` into the `div` with `display:inline`, though perfectly valid in HTML, will cause exactly the same visual issue. – Ilya Streltsyn Dec 03 '17 at 16:29
  • 3
    Please think `div` as `display: block`, and `span` as `display: inline`. It's not the point that `div` and `span` are used. – Jinux Dec 03 '17 at 16:45
  • 2
    I didn't find the answer to the "Why zero margin removes the break visually?" part of the question in the answer to the question that this question has been marked a duplicate of, so I'd like to link to the [exact paragraph in the spec](https://www.w3.org/TR/CSS22/visuren.html#phantom-line-box) that explains it. – Ilya Streltsyn Dec 03 '17 at 16:52
  • Will it make all of you feel better if the asker were to change it into all divs or all spans, and just apply the corresponding display types? For the last time, this has nothing to do with markup validity and everything to do with CSS layout. (This is why I remove the [html] tag from CSS questions sometimes.) – BoltClock Dec 03 '17 at 16:57
  • I changed the title for clarification. – Jinux Dec 03 '17 at 16:58
  • @IlyaStreltsyn thank you for the spec reference! Hope I'm as smart as understaning the spec. :) – Jinux Dec 03 '17 at 17:00
  • @Ilya Streltsyn: That's what I thought but I'm having trouble figuring out exactly what the negative margins are doing. They seem to act like positive margins as far as these line boxes (split according to §9.2.1.1) are concerned. (To be clear, the behavior described in §9.2.1.1 is not new to me.) – BoltClock Dec 03 '17 at 17:02
  • 1
    Whether the value of margin is negative or not is not important. It's the key that having zero and non-zero margin cause difference visual appearance. – Jinux Dec 03 '17 at 17:09
  • @BoltClock: As far as I understand, the fact that these margins are non-zero prevents these "fantom line boxes" above and below the inner block box from collapsing. Also, they shift the position of the parts of the split empty inline box to the left (the outline makes it visible). The first part of `.two` is shifted twice as far as `.one` because it's moved first with the right margin of `.one`, and than by its own left margin. – Ilya Streltsyn Dec 04 '17 at 07:45
  • @Ilya Streltsyn: That's what I'm not understanding, since margins on line boxes don't normally collapse, and margins don't alter whitespace processing rules either. The only margins present are horizontal margins, but they seem to cause the line boxes to shift vertically. – BoltClock Dec 04 '17 at 10:20
  • @BoltClock, it's not _margins_ what creates the vertical space above and below the inserted block, it's the `line-height` of the line boxes reserved there for parts of the split inline box (somewhat similar to the "strut" of the block box). Per the spec, these line boxes can be discarded only if the inline box has no content or non-zero margin, padding or border. So with zero _horizontal_ margins (_and_ paddings etc.) of the empty inline boxes we don't see these "phantom" line boxes, but with non-zero horizontal margins we do. – Ilya Streltsyn Dec 04 '17 at 14:11

0 Answers0