css-prop outline on DIV element not showing or incorrect

Question

i came up with this while i was looking for another fault..

Strange things are happening..

.blok {
  outline: 1px solid red;
}
.blok > label {
  padding-top: 7px;
  margin-bottom: 0;
  text-align: right;
  width: 41.66666667%;
  float: left;
  outline: 1px solid green;
}
.blok > div {
  outline: 1px solid yellow;
  height: 50px;
}

<div class="blok">
  <label>
    Deep in the night
  </label>
  <div>
    I was looking for some fun
  </div>
</div>

about .blok > div : outline

In Chrome & Safari i get none outline at all.. In Firefox i have the parents outline overwritten..

I'm looking for why this is happening.. I know i can use display: inline-block; on div > div

i know this looks like a really stupid question because i know the solution to the problem for a situation that is rare.. but it is important for me know what and who is wrong..

Thanks in advance!

score 4 · Answer 1 · answered Nov 23 '15 at 23:08

The most important thing about an outline is "The outline is NOT a part of an element's dimensions". [http://www.w3schools.com/css/css_outline.asp]

As a div is a block level element, the dimensions of the inner div and the dimensions of the outer div are identical. The outline of the inner div and outer therefore are displayed in the same visual space, where in webkit based browsers the parent's outline is showing, and in gecko (firefox) browser the child's outline shows.

Looking at the stacking spec (http://www.w3.org/TR/CSS21/zindex.html#outlines). The difference in implementation arises from E.2 7.2.2 and E.2 10, causing the difference in behaviour. Where in this case, from what I understand, Gecko based browsers E.2 7.2.2, and webkit follows E.2 10.

Thanks for your answer! explained the difference! – Nov 23 '15 at 23:13 — , Nov 23 '15 at 23:13

score 3 · Accepted Answer · answered Nov 23 '15 at 23:06

This is occurring because the margins are collapsing.

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.

Look at Updated jsFiddle working fine now.

.blok > div {
  outline: 1px solid yellow;
  height: 50px;
  overflow: hidden; /* this line added */
  float: left; /* this line added */
}

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

@RickHitchcock read the second quote from my answer. the documentation says that the element such as floats and elements with 'overflow' other than 'visible' do not collapse. it means that the element should have one of '/* this line added */' attributes. — Arash DaneshAraste, Nov 23 '15 at 23:21

css-prop outline on DIV element not showing or incorrect

2 Answers2