En la propiedad CSS, el relleno y el margen se pueden usar para tabular el espacio en lugar de los espacios que no se rompen (nbsp).
Mediante el uso de la propiedad de relleno:
Mediante el uso de la propiedad de relleno podemos dar cualquier cantidad de espacios en cualquier dirección de un elemento (es decir, arriba, derecha, abajo, izquierda) desde el borde del elemento. Aquí solo tratamos con los espacios, por lo que solo necesitamos dos propiedades de relleno, es decir, padding-left y padding-right.
Sintaxis:
padding-left : value; or padding-right : value;
Parámetro: No se requiere ningún parámetro.
Ejemplo :
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
div {
width: 300px;
height: 100px;
background-color: red;
}
P {
width: 100px;
height: 100px;
background-color: green;
text-align: center;
font-weight: bold;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#demo").css("padding-left", "30px");
});
});
</script>
</head>
<body>
<div id="demo">
<p> Block 1 </p>
<button>Submit</button>
</div>
</body>
</html>
Salida:
antes de hacer clic. 
Después de hacer clic.
Usando la propiedad de margen:
Al usar la propiedad de margen, podemos dar cualquier cantidad de espacios en cualquier dirección de un elemento (es decir, arriba, derecha, abajo, izquierda) desde el borde del elemento. Aquí solo tratamos con los espacios, por lo que solo necesitamos dos propiedades de margen, es decir, margin-left y margin-right.
Sintaxis:
margin-left : value; or margin-right : value;
Parámetro: No se requiere ningún parámetro.
Ejemplo :
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
div {
width: 300px;
height: 100px;
background-color: red;
}
P {
width: 100px;
height: 100px;
background-color: green;
text-align: center;
font-weight: bold;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#demo").css("margin-left", "60px");
});
});
</script>
</head>
<body>
<div>
<p id="demo"> Block 1 </p>
<button>Submit</button>
</div>
</body>
</html>
Salida:
antes de hacer clic. 
Después de hacer clic.