边境上的CSS保证金问题

Question

我正在尝试创建一条虚线，左边和右边有一些空格。我使用了以下代码：

.dotted{
  border-top:2px dotted red;
  margin-left:50px;
  margin-right: 50px;
} 

<div class="dotted"></div>

这奇怪地在虚线的左边放置了白色空间;但不在右边。任何人都可以解释上面的代码有什么问题，我怎么能在虚线的两边有空格？