原創:itsOli @前端一萬小時
本文首發於公衆號「前端一萬小時」
本文版權歸做者全部,未經受權,請勿轉載!
複製代碼
🔗緊接上篇文章css
🤔提問:水平或垂直方向各自 7 大屬性相加要等於父元素的 width 或 height,那 margin 爲負值會形成什麼結果?html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<p class="wide">How are you?</p>
<p>Fine,thank you,and you?</p>
</div>
</body>
</html>
複製代碼
div {
width: 400px;
border: 3px solid black;
}
p.wide {
border: 1px dashed black;
margin-left: 20px;
width: auto;
margin-right: -50px;
background-color: yellow;
}
複製代碼
div {
width: 400px;
border: 3px solid black;
}
p.wide {
border: 1px dashed black;
margin-left: 20px;
width: 500px;
margin-right: auto;
background-color: yellow;
}
複製代碼
div {
width: 400px;
border: 3px solid black;
}
p.wide {
border: 1px dashed black;
margin-left: -50px;
width: auto;
margin-right: 10px;
background-color: yellow;
}
複製代碼
🔗效果及源碼連接前端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<p class="wide1">How are you?</p>
<p class="wide2">Fine,thank you,and you?</p>
</div>
</body>
</html>
複製代碼
div {
width: 400px;
border: 3px solid black;
}
p.wide1 {
border: 1px dashed black;
margin-top: -20px; /* 修改這裏的值來觀察效果 */
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
width: auto;
background-color: yellow;
}
p.wide2 {
border: 1px dashed black;
margin-top: ;
margin-right: 20px;
margin-bottom: ;
margin-left: 20px;
width: auto;
background-color: grey;
}
複製代碼
💡把段落 1 的 margin-top 設爲「負」,它就被向上「拉」了 20 像素,且緊挨它的段落 2 也相應向上拉了 20 像素: bash
下篇咱們繼續講解 CSS「負 margin」剩下的知識點。ide
祝好,qdywxs ♥ you!post