Question

它在左侧和顶部有一个边距，但填充到最右边，我不想要任何白色边框/或边距（不确定它的白色边框或边缘是否由于背景为白色。

使用DW CS6

继承我的代码

HTML;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="shortcut icon" href="Images/favicon.png" type="image.png"/>
<link rel="shorcut icon" href="Images/Favicon.ico"/>
<link rel=”apple-touch-icon” sizes=”114×114″ href="Images/apple-touch-icon-  114×114.png"/>
<link rel=”apple-touch-icon” sizes=”72×72″ href="Images/apple-touch-icon-72×72.png"/>
<link rel=”apple-touch-icon” href="Images/touch-icon-iphone.png"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IPS Fire & Security - Leading Maintainers & Installers of Intruder / Burlgar    Alarms, Fire Alarms, CCTV & Access Control</title>

<link href="Style/style.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
   }

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-             2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body bgcolor="#FFFFFF">
 <div class="Header">

        <div id="NavBar">
 <ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a>    </li>
<li><a href="#">About Us</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Services</a>
  <ul>
    <li><a href="#">Alarms</a></li>
    <li><a href="#">Fire</a></li>
    <li><a href="#">CCTV</a></li>
    <li><a href="#">Access Control</a></li>
    <li><a href="#">Care</a></li>
    <li><a href="#">Maintenance</a></li>
  </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">News</a>
  <ul>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Press</a></li>
  </ul>
</li>
<li><a href="#">Contact Us</a></li>

<div id="ImageLinks">
<span style="position:absolute;left:31%;"><img src="Images/burglar.jpg" width="175"     height="250" alt="IPS Fire &amp; Security Intruder Alarms" /></span>

<span style="position:absolute;left:41%;"><img src="Images/CCTV.jpg" width="175"   height="250" alt="IPS Fire &amp; Security CCTV / HD CCTV / Cameras" /></span>

<span style="position:absolute;left:51%;"><img src="Images/Tunnel-Fire1.jpg"   width="175" height="250" alt="IPS Fire &amp; Security Fire Alarms" /></span>

<span style="position:absolute;left:61%;"><img src="Images/access.jpg" width="175"   height="250" alt="IPS Fire &amp; Security Access Control, Door Access &amp; Video Systems" /></span>

</div>

  <script type="text/javascript">
  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",         {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",        imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
  </body>

CSS

#NavBar {
height: 37px;
width: 900px;
margin-right: auto;
margin-left: 520px;
padding-top: 0px;
margin-top: 0px;
font-family: "Square721 BT", Arial;
text-align: center;
}

.Header {
height: 200px;
width: 1920px;
left: 0px;
right: 0px;
margin: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#ImageLinks {
height: 250px;
width: 900px;
margin-right: auto;
margin-left: auto;
left: auto;
right: auto;
margin-top: 0.5%;
}

Answer 1

添加声明：

body{ padding: 0; margin: 0; }

到你的CSS，这将删除继承的浏览器填充和边距，并应删除标题周围的“边框”。

另外，请查看：http://meyerweb.com/eric/tools/css/reset/，它将重置所有浏览器类并为您留下空白画布。

Answer 2

您应该使用margin, padding and border。
白色空间和边框的边距和填充，因此您不会在图片周围找到边框（在某些浏览器中）。

body {margin:0; padding:0;}
And
img { border:none;}

HTML / CSS标题图像有一个边距，我看不出任何原因

2 个答案: