吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 2224|回复: 27
收起左侧

[已解决] 前端基础:为什么我没有给外右边距,但是右边显示出来?

[复制链接]
clearwater 发表于 2019-12-28 10:40
本帖最后由 clearwater 于 2019-12-28 11:21 编辑

求教:为什么. right li 的这个盒子,我没有给右外边距,但是显示的结果还是有一点外右面距? 第44行。(下面是截图)

外边距.PNG

[Asm] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>小米手机</title>
        <style>
        * {
                margin: 0;
                padding: 0;
        }
        li {
                list-style: none;
        }
        /*记得有标尺拉线来量*/
         .box {
                 width: 1224px;
                 height: 618px;
                 margin: auto;
                 background-color: pink;
         }
         .left {
                 /*高度属性是不继承的,一般盒子的高度默认由其内容撑开;而宽度属性也是不继承的,但是块级元素宽度默认独占一整行的宽度(即父盒子内容的宽度),行内元素和行内块元素的宽度是由其内容撑开*/
                 float:left;
                 width: 232px;
                 /*height: 618px; 写数字和写100%一样,100%比较好*/
                 height: 100%;
                 background-color: purple;
                 
         }
         .right {
                 float:right;
                 width: 992px;
                 height:100%;
                 background-color: skyblue;
         }
         .right li {
                 float: left;
                 width: 234px;
                 height: 302px;
                 border: 1px solid red;
                 /*margin-left:10px;
                 margin-bottom: 10px;*/

                 margin: 0 0 10px  10px;
        
         }
        </style>
</head>
<body>
        <div class="box">
                <div class="left"></div>
                <div class="right">

                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                </div>

        </div>
</body>
</html>

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

肖伟95 发表于 2019-12-28 10:53
对于遇到不懂的问题,我都是F12找到相应css,直接修改预览,改好了,在复制回来粘贴到css文件里

免费评分

参与人数 1吾爱币 +1 热心值 +1 收起 理由
clearwater + 1 + 1 谢谢@Thanks!

查看全部评分

楞枷山人 发表于 2019-12-28 10:56
描述的不是很清楚 没办法给正确的解决办法,但是每个浏览器都自带了padding和margin 你可以试一下把body的padding和margin都置为0,再尝试一下。
咿呀哇 发表于 2019-12-28 10:59
 楼主| clearwater 发表于 2019-12-28 11:01
本帖最后由 clearwater 于 2019-12-28 11:03 编辑
咿呀哇 发表于 2019-12-28 10:59
margin: 上 右 下 左
margin: 0 0 10px  10px;

这个我知道呀。

我右边给的值是0,但是还是有显示出来那么一丁点,除非我把在外左边距,改为12PX,右边才没有。
 楼主| clearwater 发表于 2019-12-28 11:02
本帖最后由 clearwater 于 2019-12-28 11:03 编辑
肖伟95 发表于 2019-12-28 10:53
对于遇到不懂的问题,我都是F12找到相应css,直接修改预览,改好了,在复制回来粘贴到css文件里

谢谢大神。不晚于明天之前给您评分。我改好了。

~~~~~~~~~~~~~~~~~~~

不过我还是想知道为什么我明明外右边距,设为0,但是还是有外右边距。希望有哪个大神可以指教一下这个问题
风一样自由 发表于 2019-12-28 11:03
本帖最后由 风一样自由 于 2019-12-28 11:07 编辑

992-(234+1+1+10)X4=8
div.right的宽度-(li的宽度+左边框1px宽+右边框1px+左边距10px)X  4个li =8px
南下. 发表于 2019-12-28 11:04
本帖最后由 南下. 于 2019-12-28 11:06 编辑

父盒子宽度没用完剩下的 你父盒子设置了宽度 不是由li撑开的 那个不是右边距 只是多余的部分

免费评分

参与人数 1吾爱币 +1 热心值 +1 收起 理由
clearwater + 1 + 1 非常感谢大神

查看全部评分

 楼主| clearwater 发表于 2019-12-28 11:07
本帖最后由 clearwater 于 2019-12-30 09:32 编辑
南下. 发表于 2019-12-28 11:04
父盒子宽度没用完剩下的 你父盒子设置了宽度 不是由li撑开的

既然我的父盒子没用完,为什么不是全部移到左边?

前面已经给了 子盒子的外右边距0了



swith丶 发表于 2019-12-28 11:09
8楼说的没错
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2025-1-13 15:53

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

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