html边框缩短,有什么办法css border缩短

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

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

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

为什么不用伪元素

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

想要实现预期的短边框效果，我提供两种思路。

1.把这个表框包裹的content的高度减小，然后用margin保留占据空间；

2.利用其他空元素(或新建一个标签或利用伪元素)，定义这个元素的高度为你的目标高度，再设置表框或者干脆用width:1px;background-color:gray;来达到预期效果。

一个div

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

方法一：伪元素: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到文字本身

<div class="demo"><span>一厅</span></div>

<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>

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

用padding也行啊

.left{

position: relative;

}

.left:after {

content: '';

height: 36px;

border-left: 1px solid #000;

position: absolute;

top: 2px;

right: 0px;

}

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

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