DIV标签里自带空格

最新推荐文章于 2023-04-06 09:57:02 发布

我家空空

最新推荐文章于 2023-04-06 09:57:02 发布

阅读量3.1k

点赞数 1

分类专栏：笔记前端练习

本文链接：https://blog.csdn.net/qq_45465526/article/details/112542800

版权

笔记同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

前端练习

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{
            background: #E9E8E8;
        }
        div{
            width: 300px;
            height: 28px;
        }
        input[type="text"]{
            width: 240px;
            height: 28px;
            background: white;
            border: none;
            padding: 0px;
            outline: none;
            /*float: left;*/
        }
        input[type="button"]{
            width: 60px;
            height: 28px;
            border: none;
            padding-top: 0;
            padding-bottom: 0;
            outline: none;
            background: #c70202;
            /*float: left;*/
        }
    </style>
</head>
<body>
    <div>
        <input type="text">
        <input type="button" value="提交">
    </div>
</body>
</html>

上面这段代码的效果如下：
在这里插入图片描述
可是我设置的外面的div的宽度为300px，输入框的宽度为240px，button的宽度为60px。所有的padding, margin, border（除button的左右padding）都设为0，但是为什么button和输入框不在同一行呢？

原来`div`自带空格占据空间，所以为`div`加上`font-size:0;`就可以了。

在这里插入图片描述

参考链接

我家空空

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV标签里自带空格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> body{ background: #E9E8E8; } div{ width: 300px; height: 28px; } input[t
复制链接

扫一扫