两个并排的div之间有间隔问题

最新推荐文章于 2022-12-21 00:15:49 发布

秋天1014童话

最新推荐文章于 2022-12-21 00:15:49 发布

阅读量2w

点赞数

分类专栏： web前端 CSS3

本文链接：https://blog.csdn.net/u013217071/article/details/52517924

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

CSS3

27 篇文章 0 订阅

订阅专栏

问题描述1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两个并排的div之间有空隔</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            display: inline-block;
            width:50px;
            height:50px;
        }
        .one{ 
            background: blue;
        }
        .two{
            background: red;
        }
    </style>
</head>
<body>
    <div class="one">第一个div</div>
    <div class="two">第二个div</div>
    是打发斯蒂芬
    奥斯卡的附件
</body>
</html>

对于上述代码：显示的结果如下图：

这里写图片描述

解决办法一：两个div之间有间隔，问题是两个div之间有个回车键，就如下面的文字所示，即使在html代码中是换行的，但是浏览器显示出来的是在同一行，这是因为浏览器将空格、回车、tab键等字符都当做一个空格处理！
解决办法2：将两个div都设置为左浮动，也可以解决问题！

代码换成这样就好了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两个并排的div之间有空隔</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            display: inline-block;
            width:50px;
            height:50px;
        }
        .one{ 
            background: blue;
        }
        .two{
            background: red;
        }
    </style>
</head>
<body>
    <div class="one">第一个div</div><div class="two">第二个div</div><!-- 此处要并排，否则当做一个空格处理呢！-->
    是打发斯蒂芬
    奥斯卡的附件  阿斯蒂芬
</body>
</html>

问题描述2：

这里写图片描述

此时，两个div又总是在一个水平线上，对齐方式？？

这里写图片描述

老师讲述的案例是这样显示的？？？

秋天1014童话

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
两个并排的div之间有间隔问题

问题描述1：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>两个并排的div之间有空隔</title> <style> *{ margin:0; padding:0; } div{
复制链接

扫一扫

专栏目录