                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

让两个盒子帖在一起

<!DOCTYPE HTML>

<html>

<head>

#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>

</body>

</html>

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

我都把margin设为0了。

planter

2020-03-29

源自：初识HTML(5)+CSS(3)-升级版 12-12

关注问题我要回答

1125

操作

收起

8 回答

入幕三分
2020-11-20

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

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

1 回复有任何疑惑可以回复我~

收起回答

一个前端的小白
2020-09-17

<!DOCTYPE html>

<html>

<head>

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>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

一个前端的小白
2020-09-17

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

0 回复有任何疑惑可以回复我~

收起回答

一个前端的小白

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

2020-09-17 回复有任何疑惑可以回复我~

幕布斯5013342
2020-05-10

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

0 回复有任何疑惑可以回复我~

收起回答

慕码人0226809
2020-04-13

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

margin:1px; margin要为0

1 回复有任何疑惑可以回复我~

收起回答

慕仔3272969

好多方法

2020-12-15 回复有任何疑惑可以回复我~

慕斯卡8375291
2020-04-06

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

0 回复有任何疑惑可以回复我~

收起回答

即限公国
2020-03-29

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