Title: HTML body margin and padding set to zero cause image in box to be clipped
Tags: html;css
Question: I have a logo laid out in a box at the top of my page using the following style elements:

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

Which does an okay job of allowing me to position the image how I want it in an area at the top of my page (along with some other elements such as nav items). I'd like the whole thing to display without a border so it fills up the whole of the top of the browser window. I can achieve this by adding:

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

But when I do this it causes the image in the box to be clipped. I'm sizing the image in the html:

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

The image only clips when I add the body margin and padding, my question is: how do I get the elements at the top of the page to display so they take up the whole browser window width and go right to the top without the image clipping?

Here is the whole source, as requested:

```    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;
}
```

That's in style tags in the head section of the HTML and then some fairly simple (until I get the style sorted!) HTML in the body:

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

</div&gt;
```



I plan to move the style elements to a separate CSS once I've got it sorted. This works fine but when I add the aforementioned body margin padding elements to the start of this it clips the image.


This is how it displays in Firefox. Note the clipping on the text at the bottom and left of the logo, minor admittedly but still annoying the heck out of me! 

Comment: Do you have a live link?

Comment: Can you upload a test page that reflects the issue? Makes it a lot easier since we're dealing with an image issue.

Comment: I'm not seeing any cutoff. All that happens is the whitespace disappears. What browser are you using?

Comment: Is it doing it for you on the online version? If not, you may try clearing your cookies.

Comment: Bah, cache, not cookies. Anyways, the image you show is exactly what I see, which seems normal. How would you want it to look?

Comment: Sounds good. I don't suppose you're trying to make it to where the image doesn't shift. As in, remove the white by filling it with blue?

Comment: But there are no white gaps. Not even in your image. Unless you're talking about on the bottom of the blue?

Comment: I can't see any clipping of text at the bottom nor left either

Comment: Sorry, no building this locally before deploying to my hosting service

Comment: http://www.helpyouin.com/indexTest.html uploaded to this address - pls ignore annoying dialogs!

Comment: Firefox and have also tried in ie

Comment: Have uploaded image as it appears in my browser window - note the clipping of the text at the bottom and left - this is in the online version and also how it appears locally.

Comment: I don't appear to have any cookies for this URL. Gotta go to work now so won't be able to try anything until this evening

Comment: Will post image when home, maybe being too fussy/expecting too much of the web

Comment: @David not fussed about whether it moves much, just want no white gaps if possible. Btw, displays perfectly on my phone! Samsung, chrome browser

Comment: @dura thanks, another piece of the puzzle!

Comment: Apologies for confusion. There are no white gaps around blue header because I've added the body margin padding =0, which does as expected. The issue is when I do this I get clipping of the logo (bits of the text missing at bottom and left) this is what the uploaded image shows but apparently it's peculiar to my home system.

Comment: It is sounding increasingly likely that the issue is peculiar to my home setup. You guys all say it looks okay in your browsers. I've been doing this on a thinkpad hooked up to a second monitor via IBM docking station. Is it possible that the browser is struggling with a system running two monitors at different resolutions? This might be a forehead slap moment! Will have a play when I get home in around 5 hours. First time in ages that I've done any web stuff and first time with this setup. Will post here later with outcome.


Here is another answer: I must apologise, I think it must have been my twin screen setup! It displays perfectly on my laptop when I run it in single screen mode. MASSIVE facepalm! When I reconnect the second monitor and refresh the clipping is still evident (although apparently slightly less so since a reboot so maybe Dave had something with the cache issue?) Thanks to all who've contributed and SIGNIFICANT apologies for having wasted your time on this! Really should have stripped it down to basics and tried to remove all variables before posting, I've overcomplicated the issue (gonna claim noob numpty for my lack of experience in website building as the cause).

Anyway, big thank you for being my rubber ducks (Coding Horror - Rubber Duck Problem Solving)

Tempted to give myslef a downvote for this...


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 18, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2014:00:12/10/14', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css>', 'Title': 'HTML body margin and padding set to zero cause image in box to be clipped', 'ViewCount': 549, 'id': 27395410, 'user_AboutMe': None, 'user_AccountId': 5411888.0, 'user_DisplayName': 'fraggle', 'user_Reputation': 416.0, 'user_Views': 33.0, 'user_id': 4308361.0}}