CODEWITHSUNDEEP
htmlcss
elunicotomas
elunicotomas

Reputation: 113

Unwanted space inside of DIVs

I´m trying to place a slided image in the center if the page. I have it almost done, the thing is that inner each piece of the image I have a small space, like if it has some little padding (which it hasn't), does anybody sees something wrong in the code?

<style type="text/css">
  html, body, #wrapper, images {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: #000;
  }

  img {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }

  .center {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -300px;
  }

  .center_mini {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }

  .center_mini_float {
    float: left;
    margin: 0px;
    padding: 0px;
    border: 0px;
  }
</style>
<div class="center">
  <div class="center_mini">
    <img src="images/background_01.png" width="800" height="144" alt="bg">
    <div class="center_mini">
      <div class="center_mini_float">
        <img src="images/background_02.png" width="503" height="456" alt="bg">
      </div>
      <div class="center_mini_float">
        <div class="center_mini">
          <div class="center_mini">
            <img src="images/background_03.png" width="246" height="89" alt="bg">
          </div>
          <div class="center_mini">
            <img src="images/background_05.png" width="246" height="106" alt="bg">
          </div>
          <div class="center_mini">
            <img src="images/background_06.png" width="246" height="102" alt="bg">
          </div>
          <div class="center_mini">
            <img src="images/background_07.png" width="246" height="159" alt="bg">
          </div>
        </div>
      </div>
      <div class="center_mini_float">
        <img src="images/background_04.png" width="51" height="456" alt="bg">
      </div>
    </div>
  </div>


  <!--<img src="images/background.jpg" width="800" height="600" alt="bg">-->
</div>

Upvotes: 1

Views: 197

Answers (4)

Eric Goncalves
Eric Goncalves

Reputation: 5353

Try adding:

img { display: block; }

Upvotes: 3

user2019515
user2019515

Reputation: 4503

Images have display:inline; by default, that's what's causing the whitespace between your images. You can do three things to prevent this:

float:left;

or

display:inline-block;

or

display:block;

Upvotes: 0

Maciej Gurban
Maciej Gurban

Reputation: 5729

I think the better solution will be using

img { vertical-align: middle; }

This way you won't alternate the default browser image display. Also, make sure the image container has line-height: 100%, that could be causing problems too.

Upvotes: 1

ElBel
ElBel

Reputation: 1994

The problem is that IMG tags have a natural DISPLAY value of "INLINE". This causes extra whitespace to appear around the image in certain situations.

Depending on your layout needs, try 

img { display: block; }

or

img { display:inline-block; }

If your images are otherwise working the way you want, inline-block will cause the least amount of thrash.

More info: http://www.w3schools.com/cssref/pr_class_display.asp http://www.tequilafish.com/2009/04/29/css-removing-extra-space-underneath-an-image/

Upvotes: 2

Related Questions