Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Andrew Young
PLUS
Andrew Young
Courses Plus Student 639 Points
Posted by Andrew Young
Andrew Young
Courses Plus Student 639 Points

How to let image (not background) fill the full browser with no white space?

So I got a website here with the following code (github).

If you look at the webpage you'll notice there is white margin at the left and right side of the browser and also there is margin between two images, so what I want to achieve is no margins, I don't want any margins at two sides or between images, it should stick together perfectly, how can I do it with css?

<!DOCTYPE HTML>
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Place this data between the <head> tags of your website -->

<head>
    <title>感情 By Andrew</title>
    <link rel="shortcut icon" href="https://files.munucial.com/ddl-logo.png" />
    <meta name="keywords" content="Andrew,楊記綱,新詩,感情,現代,社會">
    <meta name="author" content="Andrew 楊記綱">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="感情，一首由Andrew所寫的新詩，描述現代社會人們感情逐漸流逝。" />

    <meta property="og:title" content="感情" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="https://andrewyg.github.io/feeling/" />
    <meta property="og:image" content="https://andrewyg.github.io/feeling/img/感情-1.jpg" />
    <meta property="og:description" content="感情，一首由Andrew所寫的新詩，描述現代社會人們感情逐漸流逝。" />
    <meta property="og:site_name" content="感情 By Andrew" />
    <meta property="article:published_time" content="2018-02-08T18:23:04+08:00" />
    <meta property="article:modified_time" content="2018-02-08T18:23:04+08:00" />
    <style>
        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <img src="img/感情-1.jpg" />
    <img src="img/感情-2.jpg" />
    <img src="img/感情-3.jpg" />
    <img src="img/感情-4.jpg" />
</body>

</html>
Phil Thomas
Phil Thomas
665 Points

Set body margin to 0 & img are inline-block/inline I guess by default due to which you're getting white space between images, setting img to display block will solve this issue.

Andrew Young
Andrew Young
Courses Plus Student 639 Points
Andrew Young
Andrew Young
Courses Plus Student 639 Points

Phil Thomas I've change the css to the following one

img {
    width: 100%;
    height: auto;
    display: block;
}
body {
   margin: 0;
   padding: 0;
}

but if you go back to my website you'll still see a super thing white line between the image.　Why?

1 Answer

johannaho
johannaho
4,150 Points

Hi Andrew,

It's about vertical margins collapsing and creating white space where your don't want it. The fourth lesson in the CSS layout course tells you all about it. I think it's best if you watch that before trying to solve it.

https://teamtreehouse.com/library/css-layout-basics/getting-started-with-css-layout/why-vertical-margins-collapse

Good luck, Johanna