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

让两个盒子帖在一起

<!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了。

提问者：planter 2020-03-29 17:03

个回答

  • 入幕三分
    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"就行了。

    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
  • 一个前端的小白
    2020-09-17 15:57:01

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

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

    加个左浮动，然后外边距为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
  • 慕码人0226809
    2020-04-13 17:44:20

    margin:1px;   margin要为0

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

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



    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