Sponsored By

Sign in to follow this  
shanenin

Close The Space Above An Image

Recommended Posts

I am trying to use css to put an image center and on top of my web page. I am able to get it centered, but I have a small space above the image. I think this is a margin property, but I am not sure. I just want to have my logo at the very top of the web page without any spacing. I have tryed setting margin-top to 0, but that does not seem to help. What am I doing wrong?

here is what I have for code

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Bright-Eyed Computer</title>



<style type="text/css">



body { background-color: black }







img.head {



display: block;

margin-left: auto;

margin-right: auto;}



</style>

</head>



<body>

<img class="head" alt="Bright-Eyed Computer (507)252-0334" src="images/header.jpg" />

</body>



</html>

Share this post


Link to post
Share on other sites

Make your undefined margins 0. Add this into your style sheet/integrated css:

* {margin: 0; padding: 0;}

Now it *should* be at the top. If not, now try setting your top margin to 0.

Share this post


Link to post
Share on other sites

it does not seem to be working. I am using this code.

img.head {
display: block;
padding: 0;
margin-top: 0;
margin-left: auto;
margin-right: auto;}

I also tried

img.head {
display: block;
padding: 0;
margin: 0;
margin-left: auto;
margin-right: auto;}

and

img.head {
display: block;
padding: 0;
margin: 0;
margin-top: 0;
margin-left: auto;
margin-right: auto;}

Share this post


Link to post
Share on other sites

Ok, then get rid of all the HTML and CSS for the image, and add this:

body {

background-image: url(xxxxxxxxxxx.jpg);

background-position: center top;

background-repeat: no-repeat;

Keep your default margins zero.

Share this post


Link to post
Share on other sites
Keep your default margins zero.

What exactly do you mean. By default, don't margins get assigned to everything?

Yes. If no margin is specified it's up to the browser to decide. I believe most browsers assume no margin = 10pixels.

Always make your default margins 0 ( * {margin: 0; padding: 0;} ) in all your style sheets. Makes it uniform across all browsers.

EDIT:

All I ment by "keep your default margins zero" was make sure you keep * {margin: 0; padding: 0;} in your style sheet.

Edited by Bubba Bob

Share this post


Link to post
Share on other sites

Thanks for your help. After putting "margin: 0" in the body instead of the image it is now working. That must mean the margin I was seeing was not from the image, but from the body.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this