JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
</div>

CSS

.a
{
    float: left;
    border: 1px dotted blue;
    padding: 10px;
    margin: 10px;
}

.b, .c, .d
{
    margin-left: 5px;
    height: 50px;
    width: 50px;
    float: left;
}

.b
{
    margin-bottom: -5px;
    border: 1px dotted red;
}

.c
{
    margin-top: -5px;
    border: 1px dotted green;
}

.d
{
    margin-right: -5px;
    border: 1px dotted purple;
}

JavaScript

console.log('.height()');
console.log('red:\t' + $('.b').height());
console.log('green:\t' + $('.c').height());
console.log('purple:\t' + $('.d').height());
console.log(' ');

console.log('.outerHeight(false)');
console.log('red:\t' + $('.b').outerHeight(false));
console.log('green:\t' + $('.c').outerHeight(false));
console.log('purple:\t' + $('.d').outerHeight(false));
console.log(' ');

console.log('.outerHeight(true)');
console.log('red:\t' + $('.b').outerHeight(true) + ' : negative bottom margin');
console.log('green:\t' + $('.c').outerHeight(true) + ' : negative top margin');
console.log('purple:\t' + $('.d').outerHeight(true) + ' : no vertical margin');
console.log(' ');

console.log('.width()');
console.log('red:\t' + $('.b').width());
console.log('green:\t' + $('.c').width());
console.log('purple:\t' + $('.d').width());
console.log(' ');

console.log('.outerWidth(false)');
console.log('red:\t' + $('.b').outerWidth(false));
console.log('green:\t' + $('.c').outerWidth(false));
console.log('purple:\t' + $('.d').outerWidth(false));
console.log(' ');

console.log('.outerWidth(true)');
console.log('red:\t' + $('.b').outerWidth(true) + ' : negative left margin');
console.log('green:\t' + $('.c').outerWidth(true) + ' : no horizontal margin');
console.log('purple:\t' + $('.d').outerWidth(true) + ' : negative right margin');
console.log(' ');