There is a code:

<body bgcolor="#ffffff" text="#2275c2" link="#2275c2" vlink="#bf5a5a" style="margin:0px;"> <div style="background-color:#e5f3ff; height:100%; width:100%; box-shadow: inset 0px 0px 20px 0px #5cb1ff; position:relative;"> <center> <span style="font: bold 32px 'Trebuchet MS'; color:#5cb1ff; text-shadow: 1px 1px 0px #000000; position:relative; display:block; margin-top:20%;">тел. 8 (322) 223-322-23</span> </center> </div> </body>

(* Here the result of the code operation does not look like it is processed by a normal browser. It is better to look at this hetemelke)
Question:
How is it that the child object [ span ] omits the parent [ div ] [ margin'ом ]?

  • so you can't reproduce the problem? - Grundy
  • @I_CaR, span does not omit the parent, it omits the body property, since its priority is for it. This time. And two- if you specified a property in the span of inherit, you would not lower it. And so he has no rules to obey the parent. - Niklex
  • If I am not mistaken - you should read about the collapse of the Marjins xiper.net/learn/css/box-model/margin-collapsing.html ..... and generally about the collapse of htmlbook.ru/samlayout/blochnaya-verstka/… - Aleksey Shimansky
  • @Niklex "And he doesn’t have a rule to obey the parent" - According to the principle of recursion, isn't the matryoshka in the matryoshka a child object? Or then what is the point of placing objects in other objects? - I_CaR

1 answer 1

  1. Use <!doctype html> .
  2. Google margin collapse.
  3. Another couple of fixes. See snippet.
  4. Margin percentage is not what you think.

 html, body { height: 100%; } * { box-sizing: border-box; } div { border: 1px solid transparent; } 
 <body bgcolor="#ffffff" text="#2275c2" link="#2275c2" vlink="#bf5a5a" style="margin:0px;"> <div style="background-color:#e5f3ff; height:100%; width:100%; box-shadow: inset 0px 0px 20px 0px #5cb1ff; position:relative;"> <center> <span style="font: bold 32px 'Trebuchet MS'; color:#5cb1ff; text-shadow: 1px 1px 0px #000000; position:relative; display:block; margin-top:20%;">тел. 8 (322) 223-322-23</span> </center> </div> </body>