javascript - 制表符时 CSS 周围有一些空间

Question

有没有办法用 CSS 在焦点元素周围留出一些空间，以便在它周围查看？
如果不是，什么可以是非侵入式 javascript？
谢谢

(please use keyboard tab)<br>
when tabbing... 
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
did you notice me?<br><br>
<span tabindex=1>I want to be a bit far from viewport TOP and BOTTOM borders</span><br><br>
and me?<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<span tabindex=2>I want the same</span><br>
at least to see this!!!<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>

编辑:
与建议的类似，这部分解决了问题:

span {
  padding-top: 70px;     /* guaranties to see the text above */
  padding-bottom: 70px;  /* guaranties to see the text below */ 
  /* but both produce a big focus rectangle around */
  outline-offset: -70px; /* this helps a little on FF */
}

这在 FF 中完美，但在 IE 中不完美:

span       {padding-top: 70px; padding-bottom: 70px;}
span:focus {padding-top: 0px; padding-bottom: 0px;}

Answer 1

不能 100% 确定这是否是您要问的，但类似这样的 JsFiddle

您可以使您的元素成为 block 元素(而不是内联 span 元素)并在 :focus 选择器上添加带有 css 的填充

// css
div:focus {padding-left: 10px;}

// html
<div tabindex=1>test</div>
<div tabindex=2>lorem</div>
<div tabindex=2>ipsum/div>

当前获得焦点的 div 将应用上述 CSS 样式。您可以将 div:focus 选择器更改为类，例如:

.my-class:focus {padding-left: 10px;}

然后将该类添加到您的元素中