行内元素在水平和垂直排列的时候会有间距

解决办法，给display：inline-block的父元素上加font-size:0;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,li{
            padding: 0;
            margin:0;
        }
        ul{font-size:0;}/*这里可以显示或隐藏来看效果*/
        li{list-style: none;}
        li{
            height:30px;
            display: inline-block;
            width: 25%;
            font-size: 12px;
            text-align: center;
            border:1px solid yellow;
            box-sizing: border-box;/*给行内边框，不会影响width：25%*/
        }
        li:nth-child(even){background-color:red;}
        li:nth-child(odd){background-color:black;}
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

未添加font-size：0：如下图：

添加font-size：0后，如下图：

时间： 2024-11-14 18:38:24

行内元素在水平和垂直排列的时候会有间距的相关文章

空格导致行内元素水平间隔问题

在测试块级元素与行内元素区别时,发现本该没有间隔在一行的行内元素中间出现水平间隔. 1 <span>行内元素</span> 2 <span>行内元素</span> 3 <span>行内元素</span> 4 <span>行内元素</span> 效果如下图: 导致这种问题出现的原因在于html中span便签之间的空格.如果去掉空格那么就不会有间隔. <span>行内元素</span><

行内元素和块级元素

1 块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table 行内元素:span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite, 内联元素(inline element) a - 锚点 b - 粗体(不推荐) br - 换行 em - 强调 font - 字体设定(不推荐)

【html】行内元素，块级元素

1.每个元素都具有display属性,块级元素display属性一般为:block,而行内元素display属性一般为:inline. 2.块级元素独占一行,而行内元素排列在同一行,排列不下才换行.块级元素可以设置高度宽度:height,width.也可以设置行间距与行内距:margin,padding(都具有四个方向的边距效果),而行内元素在水平有效padding-left,padding-right,margin-left,margin-right ,竖直方向无效. 3.块级元素: 1 ad

CSS_行内元素和块级元素

1 块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table 行内元素:span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite, 内联元素(inline element)a - 锚点b - 粗体(不推荐)br - 换行em - 强调font - 字体设定(不推荐)i - 斜体

行内元素和块状元素有些？

1关于行内元素和块状元素的说明 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素.div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性

Html行内元素和块级元素

1.关于行内元素和块状元素的说明 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素.div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度.宽度.内外边距等属

HTML的块级元素和行内元素

HTML 的块级元素和行内元素 HTML 文档由 HTML 元素定义. HTML里面分为块级元素和行内元素块级元素和行内元素(还可以称为内联) 1.块级元素(独占一行) 块级元素:在body里面独占一行,左右没有其他元素.块级元素有:<div>,<p>,<h1>~<h6>,<ul>等等 2.行内元素(可以与其他元素共享一行) 行内元素:行内元素  不形成新的内容块,左右可以有新的元素.例如有<a>.<span>. 还有di

div和css：行内元素和块元素的水平和垂直居中

行内元素: 水平居中:text-align:center ul水平居中:加 display:table; margin:0 auto; 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. 垂直居中:line-height:父元素的height 块元素: 水平居中: ①margin:0 auto 例: .father{ width:200px; height:200px; background-color:red; } .son{ width:100px; height:1

行内元素之间产生水平间隙的原因及解决方案

1. 行内元素之间产生水平空隙的原因:代码中有意或无意的添加了换行符,tab(制表符)或者空格等字符引起的: 2. 解决方案: 删除引起问题的换行符,制表符或者空格等,但是缺点是会使代码结构混乱: 设置margin属性为负数,如:margin-left: -3px;缺点是负数的值不确定,得具体情况具体分析,不推荐: 在行内元素之间添加HTML注释注释符号:<!----> 1 <div> 2 <span>行内元素</span><!-- 3 -->&