CSS——行内元素间的默认边距

阳光穿透心脏的1/2处 2022-04-08 11:52 371阅读 0赞

简单写一个导航栏

<style type="text/css"> * { margin: 0px; padding: 0px; } #daohang { height: 40px; width: 100%; padding-left: 32px; background-color: #00a2d4; /*text-align: center;*/ line-height: 40px; } #daohang span { padding: 0px 20px; border: 0px; } </style>
        <div id="daohang">
        <span>首页</span>
        <span>网站建设</span>
        <span>程序开发</span>
        <span>网络营销</span>
        <span>企业vi</span>
        <span>案例展示</span>
        <span>联系我们</span>
    </div>

效果  
![在这里插入图片描述][20181213181149203.png]  
可以看到，每两个span之间莫名的多了意料之外的边距，这些边距是在coding中编写span时换行所导致，修改代码：

<span>首页</span><span>网站建设</span><span>程序开发</span><span>网络营销</span><span>企业vi</span><span>案例展示</span><span>联系我们</span>

![在这里插入图片描述][2018121318151287.png]  
或类似于下面这种让一个完整的span标签跨行的写法

<span>首页</span ><span>网站建设</span ><span>程序开发</span ><span>网络营销</span ><span>企业vi</span ><span>案例展示</span ><span>联系我们</span>

或者是修改以下属性：

#daohang {
    	font-size:0px	
    	   }
    #daohang span {
        font-size:15px
    }

[20181213181149203.png]: /images/20220405/bd6fd31c3f904c5195e189e6e6c2fcf4.png
[2018121318151287.png]: /images/20220405/3def7496ec8844b692c8d818b18450cd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，371人围观）

还没有评论，来说两句吧...

相关阅读

相关何时在 CSS 中使用边距与内边距 [关闭]

问：关闭。这个问题是基于意见的。它目前不接受答案。想改进这个问题？更新问题，以便可以通过编辑这篇文章用事实和引用来回答它。 3年前关闭。改进这个问题在编写 CSS

落日映苍穹つ/ 2024年03月30日 13:54/ 0 赞/ 88 阅读

相关 CSS设置元素内边距（padding）、外边距（margin）

设置元素内边距padding 所有的 HTML 元素基本都是以矩形为基础。每个 HTML 元素周围的矩形空间由三个重要的属性来控制： padding（内边距）：

港控/mmm°/ 2024年03月29日 16:02/ 0 赞/ 109 阅读

相关 CSS-框模型处理外边距、边框、内边距、元素内容

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9wcmVwYXJlZGF0Y

我会带着你远行/ 2023年07月01日 07:26/ 0 赞/ 3 阅读

相关关于元素间的边距重叠问题与BFC

一、边距重叠常见情况 1、垂直方向上相邻元素的重叠（水平方向上不会发生重叠） ![1731684-20190815205546705-1853167807.pn

冷不防/ 2023年06月02日 09:17/ 0 赞/ 8 阅读

相关 CSS：清除元素的默认内外边距

{ padding:0;/清除元素的内边距/ margin:0;/清除元素的外边距/ } 注意：行设

淩亂°似流年/ 2023年01月07日 08:54/ 0 赞/ 128 阅读

相关 CSS——行内元素间的默认边距

简单写一个导航栏 <style type="text/css"> { margin: 0px; padding: 0px; } daohang { height:

阳光穿透心脏的1/2处/ 2022年04月08日 11:52/ 0 赞/ 372 阅读

相关 CSS 中的 margin、border、padding 区别（内边距、外边距）

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 图解CSS padding、margin、border

阳光穿透心脏的1/2处/ 2022年04月02日 03:29/ 0 赞/ 318 阅读

相关 CSS 之盒子模型——边框、内边距、外边距

使用width来设置盒子内容区的宽度使用height来设置盒子内容区的高度 width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内

Dear 丶/ 2022年01月26日 09:59/ 0 赞/ 661 阅读

相关 css内边距属性

内边距(Padding) 属性 <table> <tbody> <tr> <th align="left">属性</th> <th align=

柔情只为你懂/ 2021年11月05日 09:54/ 0 赞/ 346 阅读

相关 CSS内边距与外边距

外边距 margin 外边距是指用标签设置的内容外部的边距。它可以很好地将元素和旁边的其他元素隔开。 1.居中 auto 使用auto属性值可以将

喜欢ヅ旅行/ 2021年09月25日 12:52/ 0 赞/ 488 阅读