Question

我的页面顶部的框中有一个徽标，使用以下样式元素：

div.imgBox {
    margin: 0%;
    padding: 1%;
    border: 0px;
    background-color: #00A7FF;
}
div.imgBox img {
    display: inline;
    margin: 0px;
    padding: 1%;
    border: 0px solid #00A7FF;
}

允许我在我页面顶部的某个区域（以及其他一些元素，如导航项目）中将图像放置在我想要的位置，这是一个不错的工作。我希望整个事情没有边框显示，所以它填满了整个浏览器窗口的顶部。我可以通过添加：

来实现这一目标

body {
margin: 0px;
padding: 0px;}

但是当我这样做时，它会导致框中的图像被剪裁。我正在调整html中的图像：

<img alt="Logo" src="images/Logo.gif" style="width:15%; height:15%">

当我添加身体边距和填充时，图像只会剪辑，我的问题是：如何让页面顶部的元素显示，以便它们占据整个浏览器窗口宽度并直接到顶部图像剪辑？

根据要求，这是完整的来源：

    div.imgBox {
    margin: 0%;
    padding: 1%;
    border: 0px;
    background-color: #00A7FF;
}
div.imgBox img {
    display: inline;
    margin: 0px;
    padding: 1%;
    border: 0px solid #00A7FF;
}
.hdrBox {
    display: inline;
    float: left;
    margin: 0px;
    width: 100%;
    background-color: #00A7FF;
}
    a:link {
    color: #FFFFFF;
    background-color: transparent;
    text-decoration: none;
    color: #FFFFFF;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: #FFFFFF;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: #FFFFFF;
    background-color: transparent;
    text-decoration: none;
}
a:active {
    color: #FFFFFF;
    background-color: transparent;
    text-decoration: none;
}
navBar{
    float: right;
    right: 5vw;
    top: 10vw;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
navElement{
    font-family: "Arial", Helvetica, sans-serif;
    font-size: 2vw;
    color: #FFFFFF;
    float: right;
    display: block;
    width: 10vw;
    border: 0.25vw solid #FFFFFF;
    padding-left: 1vw;
    padding-bottom: 0.25vw;
    padding-top: 0.25vw;
    margin: 0.25vw;
}

这是HTML的head部分中的样式标记，然后是一些相当简单的（直到我得到样式排序！）HTML正文：

<body>
<div class="imgBox">
    <img alt="Logo" src="images/Logo.gif" style="width:15%; height:15%">    
        <navBar>
            <navElement><a href="#contact">Contact</a></navElement>
            <navElement><a href="#examples">Examples</a></navElement>       
            <navElement><a href="#services">Services</a></navElement>   
            <navElement><a href="#profile">Profile</a></navElement>     
            <navElement><a href="#home">Home</a></navElement>
        </navBar>
</div>
<div class="hdrBox">

</div>

我计划在将样式元素排序后将其移动到单独的CSS中。这工作正常，但是当我将上述身体边距填充元素添加到其开头时，它会剪切图像。 Image showing clipping to text at bottom and left

这是它在Firefox中的显示方式。请注意徽标底部和左侧文本的剪裁，虽然很小但仍然让我烦恼！

Answer 1

我必须道歉，我认为一定是我的双屏设置！当我在单屏模式下运行时，它在我的笔记本电脑上完美显示。大规模的facepalm！当我重新连接第二台显示器并刷新时，剪辑仍然很明显（虽然重启后显然略有不同，所以Dave可能会遇到缓存问题吗？）感谢所有为此浪费你的时间而做出贡献的人和深刻的道歉就这个！真的应该将其剥离到基础并试图在发布之前删除所有变量，我已经过度复杂化了这个问题（由于我缺乏网站构建经验而导致noob numpty）。

无论如何，非常感谢你成为我的橡皮鸭 (Coding Horror - Rubber Duck Problem Solving)

试图给myslef一个downvote ...

HTML正文边距和填充设置为零会导致框中的图像被剪裁

1 个答案: