讓兩個盒子帖在一起
<!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>
為何他們不能貼合在一起？
我都把margin設為0了。
2020-11-20
你們好像都沒有注意他寫的是“display:inline;”,把這個改成“display:inline-block;”后，然后在“#box2“加個“margin:-5px;”就行了
你們好像都沒有注意他寫的是“display:inline;”,把這個改成“display:inline-block;”后，然后在“#box2“加個"margin:-5px"就行了。
2020-09-17
<!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>
2020-09-17
加float:left 或者 直接在你這個代碼的基礎上 給它的父元素 也就是body 設置一個font-size大小為0?
2020-05-10
加個左浮動，然后外邊距為0
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>我是從后面。
2020-04-13
margin:1px;? ?margin要為0
2020-04-06
改成<div id="box1">盒子1</div><div id="box2">盒子2</div>，兩行寫成一行，
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>