Html CSS 上的边框高度

Border Height on CSS

提问by Satch3000

I have a table TD and on the right of it I want to add a 1 pixel border, so I've done this:

我有一个表格 TD，在它的右边我想添加一个 1 像素的边框，所以我这样做了：

table td {
    border-right:1px solid #000;
}

It works fine but the problem is that the border's height takes the total TD's height.

它工作正常，但问题是边框的高度占用了 TD 的总高度。

Is there a way to set the height of the border?

有没有办法设置边框的高度？

回答by ReBa

I have another possibility. This is of course a "newer" technique, but for my projects works sufficient.

我还有另一种可能。这当然是一种“较新”的技术，但对于我的项目来说已经足够了。

It only works if you need one or two borders. I've never done it with 4 borders... and to be honest, I don't know the answer for that yet.

它仅在您需要一两个边框时才有效。我从来没有用 4 个边界做过这件事……老实说，我还不知道答案。

.your-item {
  position: relative;
}

.your-item:after {
  content: '';
  height: 100%; //You can change this if you want smaller/bigger borders
  width: 1px;

  position: absolute;
  right: 0;
  top: 0; // If you want to set a smaller height and center it, change this value

  background-color: #000000; // The color of your border
}

I hope this helps you too, as for me, this is an easy workaround.

我希望这也能帮助你，对我来说，这是一个简单的解决方法。

回答by meagar

No, there isn't. The border will always be as tall as the element.

不，没有。边框将始终与元素一样高。

You can achieve the same effect by wrapping the contents of the cell in a <span>, and applying height/border styles to that. Or by drawing a short vertical line in an 1 pixel wide PNG which is the correct height, and applying it as a background to the cell:

您可以通过将单元格的内容包装在 a<span>中并对其应用高度/边框样式来实现相同的效果。或者通过在 1 像素宽的 PNG 中绘制一条短垂直线，这是正确的高度，并将其作为背景应用于单元格：

background:url(line.png) bottom right no-repeat;

回答by CairoCoder

Yes, you can set the line height after defining the border like this:

是的，您可以在定义边框后设置行高，如下所示：

border-right: 1px solid;
line-height: 10px;

回答by Byron

For td elements line-height will successfully allow you to resize the border-height as SPrince mentioned.

对于 td 元素， line-height 将成功地允许您像 SPrince 提到的那样调整边框高度的大小。

For other elements such as list items, you can control the border height with line-height and the height of the actual element with margin-top and margin-bottom.

对于列表项等其他元素，可以使用 line-height 控制边框高度，使用 margin-top 和 margin-bottom 控制实际元素的高度。

Here is a working example of both: http://jsfiddle.net/byronj/gLcqu6mg/

这是两者的工作示例：http: //jsfiddle.net/byronj/gLcqu6mg/

An example with list items:

列表项示例：

li { 
    list-style: none; 
    padding: 0 10px; 
    display: inline-block;
    border-right: 1px solid #000; 
    line-height: 5px; 
    margin: 20px 0; 
}

<ul>
    <li>cats</li>
    <li>dogs</li>
    <li>birds</li>
    <li>swine!</li>
</ul>

回答by Headshota

No, you cannot set the border height.

不，您不能设置边框高度。

回答by Roy

table {
 border-spacing: 10px 0px;
}

.rightborder {
border-right: 1px solid #fff;
}

Then with your code you can:

然后使用您的代码，您可以：

<td class="rightborder">whatever</td>

Hope that helps!

希望有帮助！

回答by manjunath vb

.main-box{  
    border: solid 10px;
}
.sub-box{
    border-right: 1px solid;
}

//draws a line on right side of the box. later add a margin-top and margin-bottom. i.e.,

//在框的右侧画一条线。稍后添加一个 margin-top 和 margin-bottom 。IE，

.sub-box{
    border-right: 1px solid;
    margin-top: 10px;;
    margin-bottom: 10px;
}

This might help in drawing a line on the right-side of the box with a gap on top and bottom.

这可能有助于在框的右侧画一条线，顶部和底部有间隙。

回答by cdeszaq

Currently, no, not without resorting to trickery. borders on elements are supposed to run the entire length of whatever side of the element box they apply to.

目前，不，并非没有诉诸诡计。元素的边框应该贯穿它们所应用的元素框的任何一侧的整个长度。

回答by Akash

Building on top of @ReBa's answer above, this custom-borderclass is what worked for me.

建立在@ReBa 上面的回答之上，这custom-border门课对我有用。

Mods:

模组：

• working with borderinstead ofbackaground-colorsince background-coloris not consistent.
• Setting height& topof the properties of :afterin such a way that the total comes up to 100%where bottom's value is implicit.

• 使用border而不是backaground-color因为background-color是不一致的。
• 以这样一种方式设置height&top的属性:after，使总数达到100%wherebottom的值是隐式的。

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  padding: 10px;
}

.custom-border {
  position: relative;
}

.custom-border:after {
  content: " ";
  position: absolute;
  border-left: 1px #6c757d solid;
  top: 35%;
  right: 0;
  height: 30%;
  margin-top: auto;
  margin-bottom: auto;
}

<ul>
  <li class="custom-border">
    Hello
  </li>
  <li class="custom-border">
    World
  </li>
  <li class="custom-border">
    Foo
  </li>
  <li class="custom-border">Bar</li>
  <li class="custom-border">Baz</li>
</ul>

Good Luck...

祝你好运...

回答by cambthompson

This will add a centered border to the left of the cell that is 80% the height of the cell. You can reference the full border-image documentationhere.

这将在单元格左侧添加一个居中边框，该边框为单元格高度的 80%。您可以在此处参考完整的边框图像文档。

table td {
    border-image: linear-gradient(transparent 10%, blue 10% 90%, transparent 90%) 0 0 0 1 / 3px;
}