设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › css盒子边框间距问题
返回列表 发新帖
查看: 5840|回复: 1

[已解决]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句耶  所以我又交了你一招，解释再代码中哦
效果图图下
ft44.png
代码如下
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6.         <style type="text/css">
  7.                 *{
  8.                     /* 去除边距 */
  9.                     margin :0;
  10.                     padding:0;
  11.                 }
  12.                 .one{
  13.                         /* border-style: solid solid solid solid;
  14.                         border-width: 20px;
  15.                         margin: 0px;
  16.                         border-top-color:#7B6E00;
  17.                         border-bottom-color: #6F4700;
  18.                         border-left-color: #7B6E00;
  19.                         border-right-color:  #6F4700; */
  20.                         /* 可以简写为1句话 */
  21.                         border: 20px solid #6F4700 ;
  22.                         /* 我这里是截图量的宽高可能跟你的实际图片有差距 所以你应该明白吧 */
  23.                         width: 494px;
  24.                         height: 325px;
  25.                         background-image: url("bz1.png");
  26.                         }
  27.                 .two{
  28.                     /* 都加40 */
  29.                         width: 534px;
  30.                         height: 365px;
  31.                         /*  */
  32.                         border:20px solid #503F00;
  33.                         margin:0 auto;
  34.                         /* border-style: solid solid solid  solid;
  35.                         border-bottom-color: #876F00;
  36.                         border-left-color:#503F00;
  37.                         border-top-color:#503F00;
  38.                         border-right-color:#876F00;
  39.                         border-width: 20px; */
  40.                         }
  41.                
  42.         </style>
  43. </head>

  45. <body>
  46.         <div class="two">
  47.                 <div class="one">
  48.                         
  49.                 </div>
  50.         </div>
  51. </body>
  52. </html>
复制代码

希望对你有所帮助
微信截图_20210428115654.png
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

肖-肖
发表于 2021-4-28 12:32:04 | 显示全部楼层    本楼为最佳答案   
弄好了 其实挺简单的 去除边距就行了
还有就是1句话能解决的事情你写了6句耶  所以我又交了你一招，解释再代码中哦
效果图图下
ft44.png
代码如下
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6.         <style type="text/css">
  7.                 *{
  8.                     /* 去除边距 */
  9.                     margin :0;
  10.                     padding:0;
  11.                 }
  12.                 .one{
  13.                         /* border-style: solid solid solid solid;
  14.                         border-width: 20px;
  15.                         margin: 0px;
  16.                         border-top-color:#7B6E00;
  17.                         border-bottom-color: #6F4700;
  18.                         border-left-color: #7B6E00;
  19.                         border-right-color:  #6F4700; */
  20.                         /* 可以简写为1句话 */
  21.                         border: 20px solid #6F4700 ;
  22.                         /* 我这里是截图量的宽高可能跟你的实际图片有差距 所以你应该明白吧 */
  23.                         width: 494px;
  24.                         height: 325px;
  25.                         background-image: url("bz1.png");
  26.                         }
  27.                 .two{
  28.                     /* 都加40 */
  29.                         width: 534px;
  30.                         height: 365px;
  31.                         /*  */
  32.                         border:20px solid #503F00;
  33.                         margin:0 auto;
  34.                         /* border-style: solid solid solid  solid;
  35.                         border-bottom-color: #876F00;
  36.                         border-left-color:#503F00;
  37.                         border-top-color:#503F00;
  38.                         border-right-color:#876F00;
  39.                         border-width: 20px; */
  40.                         }
  41.                
  42.         </style>
  43. </head>

  45. <body>
  46.         <div class="two">
  47.                 <div class="one">
  48.                         
  49.                 </div>
  50.         </div>
  51. </body>
  52. </html>
复制代码

希望对你有所帮助
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-21 14:59

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表