JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1">
    <p>This box has a margin of 0 so there is no space around the border. However, it has a padding of 20px, so there is 20px of space around this text and the border.</p>
</div>

<div class="box2">
    <p>This box has a margin of 20px so there is 20px of space all around the box. It has a padding 0, so there is no space between the text and the border.</p>
</div>

CSS

.box1 {
    padding: 20px;
    margin: 0;
    border: 10px solid black;
    width: 200px;
}

.box2 {
    padding: 0;
    margin: 20px;
    border: 10px solid black;
    width: 200px;
}


/* Ignore this */
html,body {
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

p {
    margin: 0;
}