почему нельзя задать несколько margin, применяемых к одному элементу, в процентах?

Question

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Главная</title>
            <!--    <link rel="stylesheet" href="style.css"> -->
            <style>


                            .nav1 {
                            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                            font-size:0.875em;
                            margin-left:47.803806734992679355783308931186%;
                            margin-top:3.2942898975109809663250366032211‬%;‬
                            }



            </style> 
            </head>
            <body>
                <div class="general">
                <header class=""> <!-- 1366 670 -->
                    <img src="01_one_page.png" id="picture1">
                    <nav class="nav1"><pre><a href="#">home</a>       <a href="#">about</a>       <a href="#">work</a>       <a href="#">process</a>       <a href="#">services</a>       <a href="#">testimonials</a>       <a href="#">contact</a>
                    </pre></nav>
                </header>
                </div>
            </body>
            </html>

данный код невалиден, margin-top:3.2942898975109809663250366032211‬%;‬ не работает, но почему? Как вообще можно классифицировать данную проблему?

Answer 1

Во-первых, чего Вы рассчитываете достичь такой точностью? Думаете ли Вы, что пользователь сможет углядеть разницу между 47.803806734992679355783308931186% и 47.8%?

Во-вторых, Ваше margin-top не работает, потому что у родителя нет своей высоты, его высота определяется его содержимым.

body,
html {
  height: 100%;
}

.general {
  background: lightgreen;
  height: 100%;
}

.nav1 {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.875em;
  border: 1px solid black;
  margin-left: 48.8%;
  margin-top: 13.2%;
}

<div class="general">
  <header class="">
    <!-- 1366 670 -->
    <img src="01_one_page.png" id="picture1">
    <nav class="nav1">
      <pre>
        <a href="#">home</a>
        <a href="#">about</a>
        <a href="#">work</a>
        <a href="#">process</a>
        <a href="#">services</a>
        <a href="#">testimonials</a>
        <a href="#">contact</a>
      </pre>
    </nav>
  </header>
</div>

БЛОГ НА HUSL

почему нельзя задать несколько margin, применяемых к одному элементу, в процентах?

Ответы (1 шт):