[已解决]css盒子边框间距问题

woshijunjun · 发表于 2021-4-28 11:59:32

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.one{border-style: solid solid solid solid;
border-width: 20px;
margin: 0px;
border-top-color:#7B6E00;
border-bottom-color: #6F4700;
border-left-color: #7B6E00;
border-right-color: #6F4700;
width: 350px;
height: 230px;
background-image: url("images/fengjing.jpg");}
.two{border-style: solid solid solid solid;
border-bottom-color: #876F00;
border-left-color:#503F00;
border-top-color:#503F00;
border-right-color:#876F00;
border-width: 20px;
width: 390px;
height: 270px;}

</style>
</head>

<body>
<div class="two">
<div class="one">

</div>
</div>
</body>
</html>
代码如上！
就是边框之间出现了一条白线，也就是间距，请问如何让两个边框没有间距，就是让白线消失。
谢谢大佬！

最佳答案

月排行榜 / 总排行榜

肖-肖

2021-4-28 12:32:04

弄好了其实挺简单的去除边距就行了
还有就是1句话能解决的事情你写了6句耶

所以我又交了你一招，解释再代码中哦
效果图图下

代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
        <style type="text/css">
                *{
                    /* 去除边距 */
                    margin :0;
                    padding:0;
                }
                .one{
                        /* border-style: solid solid solid solid;
                        border-width: 20px;
                        margin: 0px;
                        border-top-color:#7B6E00;
                        border-bottom-color: #6F4700;
                        border-left-color: #7B6E00;
                        border-right-color:  #6F4700; */
                        /* 可以简写为1句话 */
                        border: 20px solid #6F4700 ;
                        /* 我这里是截图量的宽高可能跟你的实际图片有差距 所以你应该明白吧 */
                        width: 494px;
                        height: 325px;
                        background-image: url("bz1.png");
                        }
                .two{
                    /* 都加40 */
                        width: 534px;
                        height: 365px;
                        /*  */
                        border:20px solid #503F00;
                        margin:0 auto;
                        /* border-style: solid solid solid  solid;
                        border-bottom-color: #876F00;
                        border-left-color:#503F00;
                        border-top-color:#503F00;
                        border-right-color:#876F00;
                        border-width: 20px; */
                        }
                
        </style>
</head>

<body>
        <div class="two">
                <div class="one">
                        
                </div>
        </div>
</body>
</html>

希望对你有所帮助

跳转到最佳答案楼层

肖-肖 · 发表于 2021-4-28 12:32:04

弄好了其实挺简单的去除边距就行了
还有就是1句话能解决的事情你写了6句耶

所以我又交了你一招，解释再代码中哦
效果图图下

代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
        <style type="text/css">
                *{
                    /* 去除边距 */
                    margin :0;
                    padding:0;
                }
                .one{
                        /* border-style: solid solid solid solid;
                        border-width: 20px;
                        margin: 0px;
                        border-top-color:#7B6E00;
                        border-bottom-color: #6F4700;
                        border-left-color: #7B6E00;
                        border-right-color:  #6F4700; */
                        /* 可以简写为1句话 */
                        border: 20px solid #6F4700 ;
                        /* 我这里是截图量的宽高可能跟你的实际图片有差距 所以你应该明白吧 */
                        width: 494px;
                        height: 325px;
                        background-image: url("bz1.png");
                        }
                .two{
                    /* 都加40 */
                        width: 534px;
                        height: 365px;
                        /*  */
                        border:20px solid #503F00;
                        margin:0 auto;
                        /* border-style: solid solid solid  solid;
                        border-bottom-color: #876F00;
                        border-left-color:#503F00;
                        border-top-color:#503F00;
                        border-right-color:#876F00;
                        border-width: 20px; */
                        }
                
        </style>
</head>

<body>
        <div class="two">
                <div class="one">
                        
                </div>
        </div>
</body>
</html>

希望对你有所帮助

账号		自动登录	找回密码
密码			立即注册