html页面里莫名奇妙的margin解决办法

最新推荐文章于 2023-03-29 09:36:55 发布
原创 最新推荐文章于 2023-03-29 09:36:55 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博主在使用flex布局时，遇到标签存在无法去除的margin问题。经排查，发现是UI框架中flex和float混用所致，float布局产生的边距在不同浏览器显示不同。解决办法是若为自己的CSS可去掉float，若为框架代码，可设置float为none或left。

在使用flex布局的时候，有一个标签总是有margin怎么都去不掉，多次尝试无果后差点以为浏览器出bug了。

最后发现是我用的UI框架flex和float混用了，最坑的是float布局产生的边距是看不见的，chrome里会显示成margin，但在Firefox上就不会显示任何东西。

找到问题之后要解决就很简单了，如果是自己写的CSS的话去掉float就行了，但这里是UI框架的代码，不方便改，只好设置float为none或者left。

最后再吐槽一句，float布局是真的坑！

渔父歌
关注
html：写网站时遇到的问题及解决
gyxx1998的博客
04-22 3829
01 绝对路径改相对路径出错：图片无法显示 dw中可以找到图片，但就是在网站上无法显示 出错： <img src="/source/img/pc.jpg" alt="闪销客户端" id="content-1-img-desktop" /> 修改后： <img src="source/img/pc.jpg" alt="闪销客户端" id="content-1-img-deskto...
你写的 HTML 可能一直是错的！DOCTYPE 的秘密终于有人讲清了
最新发布
Where there is a will, there is a way !
05-25 1342
本文深入解析了DOCTYPE的重要性，揭示了标准模式与怪异模式的关键差异，通过真实案例展示了DOCTYPE错误可能导致的严重后果，并提供了实用的最佳实践指南。
清除多余的margin 和padding
林中明月间丶
12-14 1万+
在有时候没有设置margin 和padding是继承下来的 但是达不到我们的目标位置的，所以我们用 margin:0;和padding:0;来清除多余的空间，使达到目标位置,多余的margin和padding 当我们开始写css时候开头就加*{margin:0;padding:0}这样就出去了所有的内外边距 还可以使用clear:both;清除左右两边的浮动  clear属性有:both,le
html p标签Padding,我的 p 标签怎么不能去除margin和padding呢？
weixin_35767799的博客
07-15 575
.login_boby p {margin: 0;padding: 0;} 中.login_boby写错了，应该是.login_body总体： new document .login_wrapper {position: fixed;left: 0;top: 0;bottom:0;right: 0;z-index: 100;background-color: #000;opacity: 0.75...
html去不了边距,删除因HTML中的换行而导致的不需要的边距
weixin_35395422的博客
06-15 296
我在block1和block2之间获得了display: inline-block样式的不必要的保证金。请参阅此jsFiddle。HTMLblock1block2CSS* {margin: 0px;padding: 0px;}#container {background-color: #f00;width: 100%;height: 200px;}#innercontainer {backgrou...
html设置margin无效,CSS中margin不起作用的原因及解决方法
weixin_29118723的博客
06-18 6585
margin是一个属性，指定元素和元素之间的间距，但不能为内联元素指定边距，本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法。margin不起作用的原因对于初学者来说，可能会经常遇到即使你设置了margin属性但是却不起作用。在理解margin前，我们先来看一下盒模型margin不起作用的原因往往是没有考虑到display：“display:block”或者“display:i...
html去掉盒子边距,第五天,外边距塌陷问题,盒子居中,浮动,overflow属性,clear属性,伪元素...
weixin_39606137的博客
06-11 775
day 05知识回顾1、选择器的优先级如何计算？基础选择器：权值(id>class>标签>通配符)复合选择器：构成它的所有基础选择器的权值之和2、如何去掉边框border:0border:none3、简述什么是盒模型所有的元素都可以看做是一个盒子，都具有盒模型特征，盒模型也叫做框模型，盒模型包含：内容(content)、内填充(padding)、边框(border)、外边距(ma...
DIV+CSS 浮动布局完美解决方案
12-11
然而，不管HTML页面设计人员怎么骂微软，网页还是要做的。我这里就以自己的经验给大家介绍一些常用的解决方案。 1、如果是两栏并列，要在中间显示分界线或图片，可以使用repeat-y的背景图片来实现，此样式写在这两...
python提取数据库数据到前端html5显示_python html提取数据库数据
weixin_39878745的博客
12-16 1976
python开源工具列表【持续更新】以下是个人在工作中整理的一些python wheel，供参考。这个列表包含与网页抓取和数据处理的Python库网络通用urllib-网络库(stdlib)。requests-网络库。grab–网络库(基于pycurl)。pycurl–网络库(绑定libcurl)。urllib3–...文章武耀文2018-04-253128浏览量8 个用于业余项目的...
Flexbox挑战：构建投资组合网站的CSS实践
通过应用CSS重置，开发者可以确保网页的样式一致，避免出现莫名其妙的空白边距或不一致的字体大小，从而在各种浏览器上都能提供一致的用户体验。 **盒子模型** 在CSS中，每个元素都可以被视为一个盒子，这个盒子...
flex--解决margin传递、叠加问题
qq_38472574的博客
07-22 267
flex--解决margin传递、叠加问题
去除vue自带的边距
qq_66061193的博客
03-29 2629
新建一个vue项目的时候，都会自带一个外边距，如何消除外边距呢？首先找到public下的index.html。插入以下代码，就可以消除边距啦~
去除两端margin的方法
aitaozhuo9068的博客
07-30 648
假如有一份视觉稿，其中一部分是实现这样的： 两排横向排列的框，它们中间有边距，两端无边距。每个框大小为100*100，外边距为20，整个区域为460*220。 HTML结构： <div> <ul> <li></li> <li></li> &...
img出现莫名的margin问题
WEBwriter的博客
02-27 1375
    之前写项目的时候图片小面总是会出现3px的margin，之后再网上搜了一下才知道其原理及解决方法。    原理是：图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的，所以图片底部的空隙有时是2px 3px或者更多，不同的font-size应该也会影响到空隙的大小，不同的浏览器也会对空隙的大小造成影响，在ff下为3px，IE6更多，而IE8刚...
奇怪的现象 margin引起的--已解决
A123ppleQueen的博客
10-21 194
有时间就把原因找到 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin:0; padding:0; margin-left: 3px; } form{ margin-bottom: 15px; } p{font-size:24px...
元素的垂直居中布局 (补充探索 flex 上下文自动 margin)
ximingx
02-15 1367
元素的垂直居中布局 (补充探索 flex 上下文自动 margin)
html消除自带边距,CSS3中清除外边距、内边距margin,padding使用方法
热门推荐
weixin_35407400的博客
06-03 1万+
CSS3 margin,padding几个命令做开的的都知道了，我们今天一起来看一篇关于CSS3中清除外边距、内边距margin,padding使用方法，希望例子能够给大家带来帮助。建议给html页面创建样式时，首先添加如下CSS样式，将所有的元素内外间距都设为0：{margin: 0px;padding: 0px;}因为如果我们不明确定义，由于不同浏览器处理策略不同，有的默认间距就设为0，而有的...
子div的margin影响父div
热爱web前端开发
01-06 639
今天写div的时候，碰到了这个问题，当给子div加了margin以后，父div会莫名其妙的增加对于的margin。解决办法：给父div添加overflow:hidden。或者让子div浮动起来。都可以解决
解决HTML嵌套div中margin失效问题及IE特性解释
在HTML中，当一个`div`元素嵌套在另一个`div`中时，有时候外层`div`的`margin`设置可能不会生效。这是因为当外层`div`的父元素具有`padding`值为0时，内层`div`的`margin`值会被“挤压”，导致外层`div`的`margin`看...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值