Как сделать отступ таблицы в px сверху и слева?

Question

<!DOCTYPE html>
<meta charset="utf-8">
<title>My Project 1.0.0.1</title>
<html>
<table></table>   
<style>
li {
    list-style: none;
}
li:before {
    content: "✓ ";
}

input {
    border: none;
    width: 80px;
    font-size: 14px;
    padding: 2px;
}

input:hover {
    background-color: #eee;
}

input:focus {
    background-color: #ccf;
}

input:not(:focus) {
    text-align: right;
}

table {
    border-collapse: collapse;  
}

td {
    border: 1px solid #999;
    padding: 0;
}

tr:first-child td, td:first-child {
    background-color: #ccc;
    padding: 1px 3px;
    font-weight: bold;
    text-align: center;
}

footer {
    font-size: 80%;
}


</style>
<body>
<script>
for (var i=0; i<10; i++) {
    var row = document.querySelector("table").insertRow(-1);
    for (var j=0; j<10; j++) {
        var letter = String.fromCharCode("A".charCodeAt(0)+j-1);
        row.insertCell(-1).innerHTML = i&&j ? "<input id='"+ letter+i +"'/>" : i||letter;
    }
}

var DATA={}, INPUTS=[].slice.call(document.querySelectorAll("input"));
INPUTS.forEach(function(elm) {
    elm.onfocus = function(e) {
        e.target.value = localStorage[e.target.id] || "";
    };
    elm.onblur = function(e) {
        localStorage[e.target.id] = e.target.value;
        computeAll();
    };
    var getter = function() {
        var value = localStorage[elm.id] || "";
        if (value.charAt(0) == "=") {
            with (DATA) return eval(value.substring(1));
        } else { return isNaN(parseFloat(value)) ? value : parseFloat(value); }
    };
    Object.defineProperty(DATA, elm.id, {get:getter});
    Object.defineProperty(DATA, elm.id.toLowerCase(), {get:getter});
});
(window.computeAll = function() {
    INPUTS.forEach(function(elm) { try { elm.value = DATA[elm.id]; } catch(e) {} });
})();

</script>
</body>
</html>

Answer 1

Свойство margin устанавливает величину отступа от каждого края элемента.

margin-top - устанавливает величину отступа от верхнего края элемента.

margin-bottom - устанавливает величину отступа от нижнего края элемента.

margin-left - устанавливает величину отступа от левого края элемента.

margin-right - устанавливает величину отступа от правого края элемента.

Подробнее о свойстве margin можно почитать, например, здесь.

Тока не знаю чем отличается px от em?

Например, здесь можно почитать о единицах измерения.

<!DOCTYPE html>
<meta charset="utf-8">
<title>My Project 1.0.0.1</title>
<html>
<table></table>
<style>
  li {
    list-style: none;
  }
  
  li:before {
    content: "✓ ";
  }
  
  input {
    border: none;
    width: 80px;
    font-size: 14px;
    padding: 2px;
  }
  
  input:hover {
    background-color: #eee;
  }
  
  input:focus {
    background-color: #ccf;
  }
  
  input:not(:focus) {
    text-align: right;
  }
  
  table {
    border-collapse: collapse;
    margin-top: 50px; /*Отступ сверху*/
    margin-left: 50px; /*Отступ слева*/
  }
  
  td {
    border: 1px solid #999;
    padding: 0;
  }
  
  tr:first-child td,
  td:first-child {
    background-color: #ccc;
    padding: 1px 3px;
    font-weight: bold;
    text-align: center;
  }
  
  footer {
    font-size: 80%;
  }
</style>

<body>
  <script>
    for (var i = 0; i < 10; i++) {
      var row = document.querySelector("table").insertRow(-1);
      for (var j = 0; j < 10; j++) {
        var letter = String.fromCharCode("A".charCodeAt(0) + j - 1);
        row.insertCell(-1).innerHTML = i && j ? "<input id='" + letter + i + "'/>" : i || letter;
      }
    }

    var DATA = {},
      INPUTS = [].slice.call(document.querySelectorAll("input"));
    INPUTS.forEach(function(elm) {
      elm.onfocus = function(e) {
        e.target.value = localStorage[e.target.id] || "";
      };
      elm.onblur = function(e) {
        localStorage[e.target.id] = e.target.value;
        computeAll();
      };
      var getter = function() {
        var value = localStorage[elm.id] || "";
        if (value.charAt(0) == "=") {
          with(DATA) return eval(value.substring(1));
        } else {
          return isNaN(parseFloat(value)) ? value : parseFloat(value);
        }
      };
      Object.defineProperty(DATA, elm.id, {
        get: getter
      });
      Object.defineProperty(DATA, elm.id.toLowerCase(), {
        get: getter
      });
    });
    (window.computeAll = function() {
      INPUTS.forEach(function(elm) {
        try {
          elm.value = DATA[elm.id];
        } catch (e) {}
      });
    })();
  </script>
</body>

</html>

БЛОГ НА HUSL

Как сделать отступ таблицы в px сверху и слева?

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