Question

有人可以解释一下margin：0样式在人体中的意外行为

这是我的代码段：

<!DOCTYPE html>
    <html>
    <head>
    	<title>SVG Shapes</title>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<style>
    	body, html {
    		padding: 10px;
    		margin: 0;
    	}
    	svg {
    		width: 100%;
    		height: 100%;
    		padding: 15px;
    		border: 1px solid red;
    	}
    	</style>
    </head>
    <body>
    	<svg>
    		<rect width=300 height="100" style="fill:rgb(0, 0, 255); stroke-width:3; stroke:rgb(0,0,0);" />
    	</svg>
    </body>
    </html>

我期望的是该svg将位于主体内部（所有侧面的填充均为10px），并且不会有任何滚动条。但是正在发生的事情是，身体的顶部和左侧填充正常，但是右侧填充却没有。 svg的右边框与主体保持一致（请查看image进行澄清）。

Answer 1

width: 100%是父元素的实际宽度，在您的情况下是body元素。

向其中添加填充时，您将获得100％+填充的宽度。您可以在svg样式中添加box-sizing: border-box;，以便浏览器计算出包含填充的宽度。

 body, html {
        padding: 10px;
        margin: 0;
    }
    svg {
        width: 100%;
        height: 100%;
        padding: 15px;
        border: 1px solid red;
        box-sizing: border-box; 
    }

<svg>
   <rect width=300 height="100" style="fill:rgb(0, 0, 255); stroke-width:3; stroke:rgb(0,0,0);" />
</svg>

Answer 2

使用box-sizing: border-box。

默认情况下，所有元素都设置了box-sizing: content-box。在此设置中，浏览器仅计算元素中实际内容的宽度和高度。

在box-sizing: border-box中，浏览器在计算元素时包括边界内的所有内容。

<!DOCTYPE html>
<html>
<head>
    <title>SVG Shapes</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    * {
      box-sizing: border-box;
    }
    body, html {
        padding: 10px;
        margin: 0;
    }
    svg {
        width: 100%;
        height: 100%;
        padding: 15px;
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <svg>
        <rect width=300 height="100" style="fill:rgb(0, 0, 255); stroke-width:3; stroke:rgb(0,0,0);" />
    </svg>
</body>
</html>

Answer 3

无需更改HTML文件。只能在svg类的CSS属性下方添加。

 svg {
     box-sizing: border-box;
 }

{margin}对于

3 个答案: