负margin可以改变块状元素的宽度

最新推荐文章于 2022-03-27 17:09:41 发布

鹿鹿鹿啦

最新推荐文章于 2022-03-27 17:09:41 发布

阅读量456

点赞数

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>CSS负边距测试</title>
<style type="text/css">
    #test-width, #test-width2 {
        text-align: center;
        margin-right: auto;
        margin-left: auto;
        width: 400px;
        height: 80px;
        background-color: purple;
    }
    #test-block, #test-block2 {
        background-color: blue;
    }
    #test-block2 {
        margin-right: -100px;
        margin-left: -100px;
    }
</style>
</head>
<body>
<div id="test-width">No2父元素
    <p id="test-block">我是No2子元素 </p>
</div>
<hr />
<div id="test-width2">No2父元素
    <p id="test-block2">我是No2子元素 </p>
</div>
</body>
</html>



因为P为block元素且没有指定width，则p的width+padding+border+margin=父级div的width（这里都是说的水平方向）。
这里假定padding,border为0。父级div width为400px。p的width为inherit。不设置margin，则p的width为400px。正如text-block。
当margin-left:-100px;，p.width + (-100px) = 400px。So, p的width就变成了500px。
这里说的p都是假定为inherit width。如果指定了p的width，则margin-left,margin-top为负值会引起p元素位置的变化。

优惠劵

鹿鹿鹿啦

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
负margin可以改变块状元素的宽度

html>head>meta http-equiv="Content-type" content="text/html; charset=utf-8">title>CSS负边距测试title>style type="text/css"> #test-width, #test-width2 { text-align: center; margin-ri
复制链接

扫一扫