inline-block后margin失效的问题

Goslingy 2013-01-04 10:27:25

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div style="border:1px solid red;width:100px;height:100px;margin-right:30px;display:inline-block;">aaa</div>
<div style="border:1px solid blue;width:250px;height:100px;margin-left:30px;display:inline-block;">bbb</div>
</body>
效果如图

理论上这2个div应该是差60px的，实际上在很多浏览器里都多了8px
求教在display为inline-block情况下，怎样精确控制2个div间的距离

...全文

682 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

Goslingy 2013-01-04

打赏
举报

回复

求教，帮忙，谢谢啊

Goslingy 2013-01-04

打赏
举报

回复

知道啦，谢谢大家

KK3K2005 2013-01-04

打赏
举报

回复

办法有很多可以用 float：left margin-right 可以中间加一个 60宽度的inline－block 可以在第一个div外面套一个 padding－right：60 的div ...

MUI是国内最主流的跨平台APP开发框架 RN是国外最主流的跨平台APP开发框架，MUI是基于webview进行渲染的，RN是基于原生组件进行渲染，从功能和体验上RN更加接近原生，但是学习难度相对比MUI来说稍微高一些

为什么inline-block元素使用margin：0 auto不起作用再次提到上面的考点，这7大属性的值加起来必须是元素包含块的宽度，这里我们假设其他属性均为0，那也就是margin-left + width + margin-right = 包含块的宽度。所以：对于块级元素，当width固定后，margin就能通过margin = (包含块的宽度 - width )/2获得取值而对于inline-block元素（包含行内替换元素比如img等），内容的宽度就是最终的宽度，没有margin-left

inline-block元素之间不可以有空格（换行），例如： <span></span> <span></span> <span></span> 设置margin时是无效的，修改成这样就可以了： <span></span><span><

最近在写导航的时候，使用了inline-block，之前的都是用float写，没有遇到今天的换行问题，打开调试模式，查看padding和margin均为0，也就是说，问题并不是出现在换行元素本身上边，于是查找了一些资料，了解到* inline-block是包含空格、换行符的，所以会导致inline-block产生不可见的间距，就出现了无法理解的换行。查看大神们的解决办法，了解到，可以通过以下办...

当我们想要元素水平排列的时候，inline-block或者float是最好的选择了，但是当父元素的宽高都设置了的时候，子元素会失效，如下：代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0;

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章