使用CSS的margin和padding属性可以控制元素的边距和内边距。其中，margin用于控制元素与其他元素之间的距离，padding用于控制元素内部内容与边框之间的距离。可以通过以下代码来控制元素的边距和内边距：
/* 控制元素的边距 */
.example {
margin: 10px; /* 上下左右边距都为10px */
margin-top: 20px; /* 上边距为20px */
margin-left: 30px; /* 左边距为30px */
margin-right: 40px; /* 右边距为40px */
margin-bottom: 50px; /* 下边距为50px */
}
/* 控制元素的内边距 */
.example {
padding: 10px; /* 上下左右内边距都为10px */
padding-top: 20px; /* 上内边距为20px */
padding-left: 30px; /* 左内边距为30px */
padding-right: 40px; /* 右内边距为40px */
padding-bottom: 50px; /* 下内边距为50px */
}
除了像上面那样使用像素值来控制元素的边距和内边距，还可以使用百分比值。百分比值是相对于父元素的宽度来计算的。
/* 控制元素的边距 */
.example {
margin: 10%; /* 上下左右边距都为父元素宽度的10% */
margin-top: 20%; /* 上边距为父元素宽度的20% */
margin-left: 30%; /* 左边距为父元素宽度的30% */
margin-right: 40%; /* 右边距为父元素宽度的40% */
margin-bottom: 50%; /* 下边距为父元素宽度的50% */
}
/* 控制元素的内边距 */
.example {
padding: 10%; /* 上下左右内边距都为父元素宽度的10% */
padding-top: 20%; /* 上内边距为父元素宽度的20% */
padding-left: 30%; /* 左内边距为父元素宽度的30% */
padding-right: 40%; /* 右内边距为父元素宽度的40% */
padding-bottom: 50%; /* 下内边距为父元素宽度的50% */
}