课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

让两个盒子帖在一起

来源：12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）

planter

2020-03-29 17:03

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>填充</title>

<style type="text/css">

#box1{

    display:inline;

    width:80px;

    height:50px;

    padding:50px 10px 40px 10px;

    border:1px solid red;

    text-align:center;

    margin:1px;

}

#box2{

    display:inline;

    width:80px;

    height:50px;

    padding:50px 10px 40px 10px;

    border:1px solid red;

    text-align:center;

    margin:1px;

}

</style>

</head>

<body>

<div id="box1">盒子1</div>

<div id="box2">盒子2</div>

</body>

</html>

http://img1.mukewang.com/5e8064000001941502030124.jpg

为何他们不能贴合在一起？

我都把margin设为0了。

写回答 关注

8回答

  • 入幕三分
    2020-11-20 17:14:50

    你们好像都没有注意他写的是“display:inline;”,把这个改成“display:inline-block;”后，然后在“#box2“加个“margin:-5px;”就行了http://img1.mukewang.com/5fb788cb0001451b10910902.jpg


    你们好像都没有注意他写的是“display:inline;”,把这个改成“display:inline-block;”后，然后在“#box2“加个"margin:-5px"就行了。

    0 1
  • 一个前端的小白
    2020-09-17 16:07:23

    <!DOCTYPE html>


    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />


    <title>填充</title>


    <style type="text/css">

    body {

    font-size: 0;

    }

    * {

    margin: 0;

    padding: 0;

    }

    #box1 {

    display: inline;


    padding: 50px 10px 40px 10px;


    border: 1px solid red;


    text-align: center;


    font-size: 20px;

    }


    #box2 {

    display: inline;


    padding: 50px 10px 40px 10px;


    border: 1px solid red;


    text-align: center;

    font-size: 20px;

    }

    </style>

    </head>


    <body>

    <div id="box1">盒子1</div>


    <div id="box2">盒子2</div>

    </body>

    </html>



    0 0
  • 一个前端的小白
    2020-09-17 15:57:01

    加float:left 或者 直接在你这个代码的基础上 给它的父元素 也就是body 设置一个font-size大小为0 

    1 0

    一个前端的小...

    给body设置字体大小0了后，还要给两个盒子设置字体大小，不然看不到，因为你已经把它改成行内元素了，行内元素宽高是由字体的大小给撑开的，所以你上边设置的宽和高也已经没有作用了

    2020-09-17 16:05:03

    共 1 条回复 >

  • 幕布斯5013342
    2020-05-10 22:46:02

    加个左浮动，然后外边距为0

    0 0
  • 慕码人0226809
    2020-04-13 18:09:05
    <!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    <title>填充</title>

    <style type="text/css">
        div{
            width:80px;

            height:50px;

            padding:50px 10px 40px 10px;

            border:1px solid red;

            text-align:center;
            float: left;
        }
        
    </style>

</head>

<body>

<div id="box1">盒子1</div>

<div id="box2">盒子2</div>

</body>

</html>

    我是从后面。

    float: left;


    0 0
  • 慕码人0226809
    2020-04-13 17:44:20

    margin:1px;   margin要为0

    1 1

    慕仔3272...

    好多方法

    2020-12-15 10:35:31

    共 1 条回复 >

  • 慕斯卡8375291
    2020-04-06 18:18:58

    改成<div id="box1">盒子1</div><div id="box2">盒子2</div>，两行写成一行，



    0 0
  • 即限公国
    2020-03-29 17:45:34

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>填充</title>
    <style type="text/css">
    #box1,#box2{
        display:inline;
        width:80px;
        height:50px;
        padding:50px 10px 40px 10px;
        border:1px solid red;
        text-align:center;
        margin:0;
        float:left;
    }
    </style>
    </head>
    <body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    </body>
    </html>


    0 0

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225297 学习 · 18230 问题

查看课程

相似问题

这两个盒子 一上一下 都在右边怎么实现！！！

回答 2

怎样让盒子不被撑大？

回答 3

一个盒子的宽度

回答 2

关于两个盒子之间的间距问题

回答 1

一个盒子等于一个块元素吗？？

回答 2

打开慕课网App查看更多内容