写了margin：0；paddind:0；也会有边距

最新推荐文章于 2024-06-27 10:45:39 发布
最新推荐文章于 2024-06-27 10:45:39 发布
阅读量633 收藏 4
点赞数 6
分类专栏： 元素与元素之间造成的边距 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56382471/article/details/115124352
版权

元素和元素之间有一定边距

有时候我们在编程是将margin改成0，padding也改成0但无论如何都会有一定的边距，如下图：
在这里插入图片描述
有时候真的很令人头疼，怎么找也找不出原因；
解决办法：在元素与另一个元素换行的位置打一个注释就行了
因为换行会默认有一定的边距
在这里插入图片描述
这样就解决啦！
在这里插入图片描述

相思碎.
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue的边距怎么设置_Vue项目，最近在做一个网站项目，遇到一个body页面布局四周留白的问题，以下是解决方法：...
weixin_39664995的博客
12-18 2130
最近在做一个网站项目，遇到一个body页面布局四周留白的问题，以下是解决方法：1、需求负责人在查看效果时，发现body页面布局的四周留有空白，认为影响美观，让其去掉四周留白。2、项目环境项目中使用的是 vue + vue cli + element ui 搭建3、解决过程3.1 这是页面渲染出来的效果，四周有明显的留白，并且图片两侧的留白有两层；image.png3.2 打开F12控制台后，发现...
Thinkphp5.0 遇到的坑
an050602的博客
06-15 1420
玩一个新的东西奶子痛。 1.模版输出，按照文档的做法来做模版输出，然后发现html引用的 __PUBLIC__ 渲染的路径 出错，找不到原因     不明所以的View类，或许这个类是有意义的。但是对一个没玩过的人来看这个文档，以为用View来做模版输出。没想到踩坑了。 解决方案：不使用View类，就 $this->assign('key',"value"); return $t
设置了 *{padding: 0；margin: 0；} 但是没有用，仍然有padding【已解决】【蠢蛋】
pinkowonote的博客
08-03 2215
@media screen and (min-width: 768px) { *{ padding: 0; margin: 0; } .container { width: 750px; /* background-color: aqua; */ margin: 0 auto; } .container ul li { float: left; /* display: inli
关于网页布局中常见的margin: 0px ; padding: 0px; 总结
weixin_30258901的博客
08-15 3161
我们在网页布局中常用到margin: 0px; padding: 0px; 但是在大型的网站布局中通常不这样写通常是按下面这种方式。 ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a { padding: 0px; margin: 0px; } 但是经过本人的逐一验证发现有的标签的初始化marg...
vue wabpack项目中body的margin、padding的有效设置
本海的窝
11-29 4348
出现情况： 处理办法： 找到如下文件添加代码才有效
元素设置了 margin 和 padding 为0 ，但还是显示边距问题
weixin_52688746的博客
05-26 927
元素设置了 margin 和 padding 为0 ，但还是显示边距问题 产生原因： 因为当前元素设置了：overflow-x: scroll; 没有隐藏滚动条导致的。 解决办法： 添加如下代码隐藏滚动条 ::-webkit-scrollbar { width: 0 !important; height: 0 !important; overflow: hidden; display: none; background: rgba(0, 0, 0, 0); opacity: 0
Vue去除浏览器默认margin值
GongWei_的博客
11-30 1959
需要在index.html文件设置即可 *{ margin: 0; padding: 0; }
css样式重置
bacaojuan5114的博客
05-24 294
/* 清除内外边距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fiel...
为什么margin:0;padding:0还是有缝隙
朽木自雕的博客
09-25 4758
在一些情况下，我们设置了margin:0;padding:0，然后发现元素之间还是有缝隙，但是检查样式、盒模型等，发现都没有问题。 这是为什么呢？ 原因：两个内联元素之间有换行或空格。 代码如下：（前为CSS样式，后为HTML代码，分析发现确实存在换行操作） .intr-list li{ /*float: left;*/ display: inline-block; ...
ThinkPHP5框架在写项目过程中遇到的相关问题，以及前端问题
jachinFang的博客
07-25 523
1、获取器不起作用 当你数据库表中的字段为is_display样式的时候，需要使用驼峰命名法。public function getIsDisplayArrt($value){ }，当你使用getLs_displayArrt就会失效。 2、解决JS在alert之后window.location.href跳转无法正常执行 今天我就在这个上面遇到了坑，找了半天原因。...
解决VUE中编写的网页顶部自带边距的问题，margin-top=60px
weixin_43753620的博客
06-04 894
在使用vue3编写网页时，发现编写的组件运行时，网页顶部始终含有空白，无论怎么设置都不行。类似与上图，显示div的margin-top为60，但是我们明明设置了0确不生效。这是因为VUE组件自带边距，我们只需要删除即可。
css设置*为margin padding为0之后，页面依然与浏览器顶部有一个间隙
前端小白菜
07-20 6182
有点奇葩的问题=》BOM头
vue-cli 新建的项目去掉默认白边
pureszgd的博客
12-11 6315
添加: body{ margin:0; padding:0; }
css布局中margin为0，但依然有间距问题的解决方法
热门推荐
UaoSonic
05-17 1万+
    在进行布局时经常会出现，div与div之间虽然设置为了margin: 0px ，但是依然有间距的问题，比如以下这种情况：html部分代码如下：<body> <div class="main"> <div class="content"> <div class="Sbox"> <div class=
html没写具体的margin但却还有的情况
fang_my的博客
02-10 812
一些标签是自带某些属性的
HTML 教程
csbysj2020的博客
06-25 433
和
HTML简化
最新发布
海天鹰
06-27 131
调试工具，网络，另存为。
html渲染的文字样式大小不统一解决方案
weixin_49720804的博客
06-21 244
用自己输入、粘贴、或者通过按钮插入的文字 在html页面上渲染出来的文字样式大小不统一解决办法
前端HTML/CSS知识点系列
weixin_43811753的博客
06-24 1032
前端html/css相关常用知识点
写一个自适应的登录和注册的页面
05-24
好的，以下是一个简单的自适应登录和注册页面的示例代码： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login/Register Page</title> <style> body { font-family: Arial, sans-serif; } .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100vh; background-color: #f2f2f2; } form { background-color: #fff; border-radius: 5px; padding: 20px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); margin: 10px; width: 100%; max-width: 350px; } input[type="text"], input[type="password"], input[type="email"] { width: 100%; padding: 10px; margin: 5px 0; border: none; border-radius: 3px; box-shadow: 0px 0px 5px rgba(0,0,0,0.1); } input[type="submit"] { width: 100%; padding: 10px; margin: 5px 0; border: none; border-radius: 3px; background-color: #4CAF50; color: #fff; font-weight: bold; cursor: pointer; } input[type="submit"]:hover { background-color: #3E8E41; } @media screen and (min-width: 768px) { .container { flex-direction: row; } form { margin: 0 10px; width: auto; max-width: none; } } </style> </head> <body> <div class="container"> <form action="#" method="post"> <h2>Login</h2> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <input type="submit" value="Login"> </form> <form action="#" method="post"> <h2>Register</h2> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="password">Password:</label> <input type="password" id="password" name="password" required> <input type="submit" value="Register"> </form> </div> </body> </html> ``` 这个页面使用了 Flexbox 布局来自适应不同的屏幕大小，通过媒体查询在大屏幕上显示两个表单。每个表单都有一个标题，用于标识该表单是登录还是注册。表单中包含了必要的输入字段和提交按钮。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值