如何在浏览器中修复自动8px空间?

时间:2019-07-10 16:50:12

标签: html margin padding

我正在尝试使灰色框位于页面顶部和侧面的末端。

任何代码段将不胜感激。

* {
  font-family: "arial"
}
<h1 class="small" style="background-attachment: scroll; background-clip: border-box; background-color: rgb(229, 229, 229); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; box-sizing: border-box; color: rgb(229, 229, 229); font-family: inherit; font-size: 22px; font-style: normal; font-variant: normal; font-weight: 600; letter-spacing: normal; line-height: 1.1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; orphans: 2; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; padding-top: 15px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"></h1><span style="display: inline !important; float: none; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: Arial; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">
    </span>
<div class="field" style="background-attachment: scroll; background-clip: border-box; background-color: rgb(229, 229, 229); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; border-bottom-color: rgb(229, 229, 229); border-bottom-style: solid; border-bottom-width: 1px; border-image-outset: 0; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(229, 229, 229); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(229, 229, 229); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(229, 229, 229); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: rgb(255, 255, 255); font-family: Arial; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; orphans: 2; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"><br>
  </div

1 个答案:

答案 0 :(得分:0)

body边距设置为0px。或者最好使用CSS resetCSS normalize

 <style> * { font-family: "arial" } body { margin: 0px } </style> 

    <h1 class="small" style="background-attachment: scroll; background-clip: border-box; background-color: rgb(229, 229, 229); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; box-sizing: border-box; color: rgb(229, 229, 229); font-family: inherit; font-size: 22px; font-style: normal; font-variant: normal; font-weight: 600; letter-spacing: normal; line-height: 1.1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; orphans: 2; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; padding-top: 15px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"></h1><span style="display: inline !important; float: none; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); font-family: Arial; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">
    </span><div class="field" style="background-attachment: scroll; background-clip: border-box; background-color: rgb(229, 229, 229); background-image: none; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; border-bottom-color: rgb(229, 229, 229); border-bottom-style: solid; border-bottom-width: 1px; border-image-outset: 0; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(229, 229, 229); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(229, 229, 229); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(229, 229, 229); border-top-style: solid; border-top-width: 1px; box-sizing: border-box; color: rgb(255, 255, 255); font-family: Arial; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; orphans: 2; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"><br></div