行内元素在水平和垂直排列的时候会有间距
Posted 最爱小虾
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了行内元素在水平和垂直排列的时候会有间距相关的知识，希望对你有一定的参考价值。
解决办法，给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后，如下图：
以上是关于行内元素在水平和垂直排列的时候会有间距的主要内容，如果未能解决你的问题，请参考以下文章