[分享]css内容与边框之间的距离

p { font-size: 16px; line-height: 1.5; } pre { background-color: #f7f7f7; padding: 10px; border: 1px solid #ddd; font-size: 14px; line-height: 1.5; }

在CSS中，我们通常会使用padding和margin来控制元素与它们周围元素之间的距离。这些属性都可以应用于元素的内容和边框上。

Padding（内边距）

内边距是元素内容和边框之间的空间。通过设置内边距，我们可以将元素的内容与边框之间的距离增加或减少。

 element {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
  } 

以上代码设置了元素的上、右、下、左内边距分别为10px、20px、30px、40px。

Margin（外边距）

外边距是元素边框和周围元素之间的空间。通过设置外边距，我们可以将元素与周围元素之间的距离增加或减少。

 element {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
  } 

以上代码设置了元素的上、右、下、左外边距分别为10px、20px、30px、40px。

在实际应用中，我们通常会使用简写属性来同时设置内边距和外边距：

 element {
    padding: 10px 20px 30px 40px;
    margin: 10px 20px 30px 40px;
  } 

上述代码将同时设置元素的上、右、下、左内边距和外边距。

总结

通过控制元素的内边距和外边距，我们可以轻松地调整元素与周围元素之间的距离。不同的内边距和外边距值会影响到元素的大小、位置和布局。在实际应用中，我们需要根据具体需要灵活使用这些属性。