去除行块级标签之间的默认间距

当两个行块级标签之间有空格,或者换行时,行块级标签之间会有一个默认4px的间距。去除方法如下:

  给行块级标签的父级设置:font-size: 0;

  在给相应的行块级标签设置需要的 font-size;

如下所示:

<style>
        .parent{
            font-size: 0;
        }

        .parent span{
            display: inline-block;
            font-size: 14px;
        }

    </style>

<div class="parent">
    <span>默认4px</span> <span>默认4px</span>
</div>

    

时间: 2024-10-16 09:33:44

去除行块级标签之间的默认间距的相关文章

h5行/块级标签的区别和注意

1.总是在新行上开始,占据一整行:2.高度,行高以及外边距和内边距都可控制:3.宽带始终是与浏览器宽度一样,与内容无关:4.它可以容纳内联元素和其他块元素. 行内元素的特点: 1.和其他元素都在一行上:2.高,行高及外边距和内边距部分可改变:3.宽度只与内容有关:4.行内元素只能容纳文本或者其他行内元素. 不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起

css基础 display:block 行内标签转为块级标签

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css基础 display:inline 块级标签-&gt;行内标签 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

块级标签和行级标签

1.块级标签:一个块级标签独占一行 2.行级标签:

HTML中的行级标签和块级标签

1.html中的块级标签 显示为“块”状,浏览器会在其前后显示折行.常用的块级元素包括: <p>, <ul>,<table>,<h1~h6>等. 2.html中的行级标签(内联元素) 按行逐一显示,前后不会自动换行: 文本格式化元素: <b>, <td>, <a>, <img>

行内标签 和 块级标签

块级标签 div    ………………块级标签 h1~h6   ………………标题 ul (内含多个li) ol (内含多个li) dl (内含一个dt    多个dd)………………列表 table(内含tr  th  td)……………………表格 p…………………………………………段落 br…………………………………………换行 form……………………………………表单 行级标签 span a……………………超链接 img……………………图片 var……………………变量,显示斜体 strong…………

HTML学习笔记——块级标签、行级标签、图片标签

1>块级标签.行级标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

行内标签与块级标签的转换

display : inline-block  块级标签转换为行内标签 display : block  行内标签转换为块级标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="dis

块级标签(行元素)和内联标签(行内元素)

块级标签 如果两个同样的标签写在一起,出现在不同的行上面,这种就是块级标签. 块级标签的特点: 占据整行,自带换行效果.除了div以外,一般块级标签都会有内外边距,宽度和高度. 常见的块级标签: <h1-h6></h1-h6>,<p></p>,<div></div> 块元素标签示例: <!DOCTYPE html> <html lang="en"> <head> <meta