即使当边距设置为百分比时，元素也会跳过父元素

当边距设置为百分比时，元素会相对于父元素的宽度进行计算，而不是相对于父元素的高度。这意味着即使边距设置为百分比，元素仍然会占据父元素的空间，并且可能会导致元素跳过父元素。

这种行为是由CSS的盒模型决定的。在标准的CSS盒模型中，一个元素的总宽度由内容宽度、内边距、边框和外边距组成。当边距设置为百分比时，它会相对于父元素的宽度进行计算。

举个例子来说明，假设有一个父元素的宽度为200px，子元素的边距设置为50%。那么子元素的边距将会是父元素宽度的50%，即100px。这样子元素的左右边距加起来就是200px，超过了父元素的宽度，导致子元素跳过父元素。

在实际开发中，为了避免元素跳过父元素，可以考虑以下几种解决方案：

1. 使用固定的像素值：将边距设置为固定的像素值，而不是百分比。这样可以确保元素的边距不会超过父元素的宽度。
2. 使用相对单位：可以使用相对单位如em或rem来设置边距。相对单位是相对于元素的字体大小或根元素的字体大小进行计算，而不是相对于父元素的宽度。
3. 使用CSS布局技术：可以使用CSS布局技术如Flexbox或Grid来控制元素的位置和大小，从而避免元素跳过父元素。

总结起来，当边距设置为百分比时，元素会相对于父元素的宽度进行计算，可能导致元素跳过父元素。为了避免这种情况，可以使用固定的像素值、相对单位或CSS布局技术来控制元素的边距。