时间戳

首页 > 解决方案 > “保证金”出人意料地为

css - “保证金”出人意料地为

问题描述

有人可以解释一下margin:0 style in body的意外行为吗

这是我的代码片段：

<!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 的右边框贴在主体上（请查看图片以进行说明）。

标签： csshtml

解决方案

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

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

 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>

推荐阅读