javascript - 有什么办法css border缩短

Question

如果 我给p设置了border边框，border根据高度占满了，我想在两边留一点空白，怎么样缩短border。

Answer 1

你现在这个p不要设border，但是在p里嵌套多一个小一点的p（当然，文字内容就都写在这个小p里面了），在小的p上设置border就ok了

Answer 2

应该是里面再加一个p,用这个p来显示边框

Answer 3

为什么不用伪元素

Answer 4

border 属性本身是包裹在content外的'边框'，是不具备修改长度能力的。

想要实现预期的短边框效果，我提供两种思路。
1.把这个表框包裹的content的高度减小，然后用margin保留占据空间；
2.利用其他空元素(或新建一个标签或利用伪元素)，定义这个元素的高度为你的目标高度，再设置表框或者干脆用width:1px;background-color:gray;来达到预期效果。

Answer 5

一个p

<p class="demo">一厅</p>

方法一：伪元素:before/:after

    .demo {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: #fff;
        position: relative;
    }
      .demo:before{
        content: '';
        width: 1px;
        height: 60%;
        background-color: #ccc;
        position: absolute;
        left: 0;
        top: 20%;
    }

方法二：设置border到文字本身

    <p class="demo"><span>一厅</span></p>
    <style type="text/css">
    .demo {
        width: 100px;
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
    }

    .demo span {
        display: block;
        height: 60px;
        line-height: 60px;
        border-left: 1px solid #ccc;
    }
    </style>

Answer 6

像这种分割线，使用before,after做更好些吧，不增加dom元素，又能自定义样式，堪称完美呀

Answer 7

用padding也行啊

Answer 8

    .left{
        position: relative;
    }
    .left:after {
        content: '';
        height: 36px;
        border-left: 1px solid #000;
        position: absolute;
        top: 2px;
        right: 0px;
    }

使用一个伪类会方便点=.=

Answer 9

跟上面的有些人说的差不多，你就试试伪元素还方便些，:after :before