Атрибут hspace тега <applet> — відступи аплета з боків

HTML

<h4 class="cap">1. <code>hspace="40"</code> на трьох теґах</h4>
<div class="ruler">
    <applet id="ap" code="Demo.class" width="80" height="56" hspace="40" vspace="10">
        текст-заміна: колись його бачили ті, у кого не було Java
    </applet>
</div>
<p class="note">Це <code>&lt;applet&gt;</code>. Відступу немає, зате видно запасний
    текст — переглядач показує вміст невідомого теґа як звичайний.</p>

<div class="ruler">
    <img id="im" width="80" height="56" hspace="40" vspace="10" alt="синій прямокутник"
         src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2256%22%3E%3Crect%20width%3D%2280%22%20height%3D%2256%22%20fill%3D%22%232f6fd0%22%2F%3E%3C%2Fsvg%3E">
</div>
<p class="note">Це <code>&lt;img&gt;</code> — той самий атрибут дає поле у 40px.</p>

<div class="ruler">
    <object id="ob" type="image/svg+xml" width="80" height="56" hspace="40" vspace="10"
            data="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2256%22%3E%3Crect%20width%3D%2280%22%20height%3D%2256%22%20fill%3D%22%233a9a4f%22%2F%3E%3C%2Fsvg%3E"></object>
</div>
<p class="note">Це <code>&lt;object&gt;</code> — теж 40px.</p>

<h4 class="cap">2. Як це пишуть сьогодні</h4>
<div class="ruler">
    <img class="css-margin" width="80" height="56" alt="жовтий прямокутник"
         src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2256%22%3E%3Crect%20width%3D%2280%22%20height%3D%2256%22%20fill%3D%22%23d1a04a%22%2F%3E%3C%2Fsvg%3E">
</div>
<p class="note">Жодних атрибутів — самий <code>margin: 10px 40px</code>.</p>

<table id="report">
    <thead><tr><th>теґ</th><th>клас у DOM</th><th>margin-left</th><th>margin-top</th></tr></thead>
    <tbody></tbody>
</table>

CSS

.ruler {
    max-width: 560px;
    margin-bottom: 4px;
    border-left: 2px dashed #d64545;
    border-right: 2px dashed #d64545;
    background: #f6f9ff;
}

.css-margin {
    margin: 10px 40px;
}

table {
    margin-top: 14px;
    border-collapse: collapse;
    font-size: .88rem;
}

th,
td {
    padding: 5px 9px;
    border: 1px solid #b9c6d8;
    text-align: left;
}

th {
    background: #eef4ff;
}

.cap {
    margin: 22px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

.note {
    max-width: 560px;
    margin: 0 0 14px;
    color: #5a6472;
    font-size: .9em;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

JS

const RYADKY = [
    ['<applet hspace="40">', 'ap'],
    ['<img hspace="40">', 'im'],
    ['<object hspace="40">', 'ob'],
];

const tbody = document.querySelector('#report tbody');

for (const [nazva, id] of RYADKY) {
    const el = document.getElementById(id);
    const styli = getComputedStyle(el);

    const row = tbody.insertRow();
    for (const v of [nazva, el.constructor.name, styli.marginLeft, styli.marginTop]) {
        row.insertCell().textContent = v;
    }

    console.log(nazva, '->', el.constructor.name,
        '| margin-left =', styli.marginLeft, '| margin-top =', styli.marginTop);
}
// → <applet hspace="40"> -> HTMLUnknownElement | margin-left = 0px | margin-top = 0px
// → <img hspace="40"> -> HTMLImageElement | margin-left = 40px | margin-top = 10px
// → <object hspace="40"> -> HTMLObjectElement | margin-left = 40px | margin-top = 10px

const aplet = document.getElementById('ap');
console.log('атрибут у розмітці записаний:', JSON.stringify(aplet.getAttribute('hspace'))); // → "40"
console.log('а властивості hspace у елемента немає:', aplet.hspace); // → undefined
console.log('зате вміст теґа видно на сторінці:',
    JSON.stringify(aplet.textContent.trim().slice(0, 24) + '…'));