JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

100% without margin nor padding
<div class="outer">
    <div style="width: 100%;" class="inner">@</div>
</div>

100% with margin
<div class="outer">
    <div style="width: 100%; margin: 10px;" class="inner">@</div>
</div>

100% with padding
<div class="outer">
    <div style="width: 100%; padding: 10px;" class="inner">@</div>
</div>

100% with padding and margin
<div class="outer">
    <div style="width: 100%; padding: 10px; margin: 10px;" class="inner">@</div>
</div>

auto without margin nor padding
<div class="outer">
    <div style="width: auto;" class="inner">@</div>
</div>

auto with margin
<div class="outer">
    <div style="width: auto; margin: 10px;" class="inner">@</div>
</div>

auto with padding
<div class="outer">
    <div style="width: auto; padding: 10px;" class="inner">@</div>
</div>

auto with padding and margin
<div class="outer">
    <div style="width: auto; padding: 10px; margin: 10px;" class="inner">@</div>
</div>

CSS

body {
    margin: 10px;
}
.outer {
    width: 200px;
    border: 1px solid red;
    margin: 20px;
}

.inner {
    height: 200px;
    border: 1px solid blue;
}