顶部和底部具有相同边距的 div（无 %）答案

【问题标题】：div with same margin top and bottom (no %)顶部和底部具有相同边距的 div（无 %）
【发布时间】：2015-06-15 07:56:20
【问题描述】：

我想要的只是在屏幕左侧有一条小黑线，顶部和底部边框为 30 像素。

差不多就是这样，但如果我使用 %，我就不会有顶部和底部的 30 像素。

#border-right {
    right:0; 
    width: 71px; 
    height: 94%; 
    top: 3%; 
    bottom: 3%; 
    position:fixed; 
    background:rgba(255,255,255,.9);
    border-left:2px solid black;
    z-index:1;
}

这就是我现在卡住的地方——https://jsfiddle.net/9o3t5u2d/

谢谢！ F.

【问题讨论】：

问题还不清楚。你在说this吗？还是that?
是的@notulysses，但我希望顶部和底部边距为30px，而不是与页面高度相关联。编辑：那完美！我不知道 calc 选项，谢谢。
所以你想要一个 2px 的线到屏幕的右边缘，顶部和底部有 3% 的空白空间？为什么你有 71px 的宽度？或者你想要 30px 思考线在 2px 实线的顶部和底部？请澄清。

标签： html css border margin padding

【解决方案1】：

您可以简单地将顶部和底部偏移设置为 30 像素，无需数学运算。

我不确定你为什么需要宽度和背景颜色，但你可以根据需要添加。

#border-right {
  position: fixed;
  z-index: 1;
  right: 0;
  top: 30px;
  bottom: 30px;
  box-sizing: border-box;
  border-right: 2px solid black;
  width: 30px; /* Not sure if you need this... */
  background: rgba(125, 125, 125, .5); /* Not sure if you need this... */
}

&lt;div id="border-right"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

您只想要顶部和底部的边框吗？

另外，你的意思是对的吗？没离开？

#border-right-top
{         
right:0; 
width: 70px; 
height: 30px; 
bottom: 0px;     
position:fixed; 
background:rgba(255,255,255,.9);
border-left:2px solid black;
z-index:1;
}

【讨论】：