CSS space removal

Question

jackbauer24 0 Junior Poster

14 Years Ago

Hey guys, thepythonguy here. Here is my problem:- My son has made a CSS webpage. It is in the rar file I gave you. It contains a few images on the left(Home, Home, Home, Home). They lead to non-existent files(just for learning purpoe). He has repeated the images there because they are just for learning purpose (again!). On the left side, you will see that below every instance of <<Home>> is a tiny gap. How to remove that gap?

html-css:bootstrap web-design

index.html (2.41 KB)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title>My first CSS page!</title>
    <style type="text/css">
       #im {
           margin: 0;
       }
        p.decor {
            font-weight: lighter;
            font-size: 10px;
            font-style: italic;
            font-variant: small-caps;
            text-indent: 50px;
            text-align: center;
        }
        #pecor {
                        
            font-size: 20px;
            text-decoration: none;
            color: #06FAEE;
            
           
            
        }
        #linkDecor{
            
            
            size: 40px; 
            padding:2px;
            border: 1px dotted #0D06FC;
            
            position: absolute;
            top: 150px;
            left: 50px;
            
        }
        #imDecor {
            border: 1px dashed #FC0011;
            padding: 2px;
            margin-right: 70px;
            position: absolute;
            top: 150px;
            left: 1000px;
            font-style: italic;
            
        }
        h1#decor {
          

            color: rgb(160, 0,0);
            text-align: center;
            font-variant: small-caps;
            top: 15px;
            left: -10px;
        }
        body#decor {
            background: rgb(123, 234, 12);
        }
    </style>
</head>
<body id="decor">
 <h1 id="decor">First CSS!</h1>
 <div id="linkDecor">
    <a id="pecor" href="h.html"><img id = "im" src="home.jpg" height="49" width="111"></a><br>
    <a id="pecor" href="i.html"><img id = "im" src="home.jpg" height="49" width="111"></a><br>
    <a id="pecor" href="i.html"><img id = "im" src="home.jpg" height="49" width="111"></a><br>
    <a id="pecor" href="i.html"><img id = "im" src="home.jpg" height="49" width="111"></a>
 </div>
 <div id = "imDecor">
    <img src="bgveyron1.jpg" height=200  width=200><br>
    <p>A photo of the Bugatti Veyron.</p><br>
    <img src="bgveyron2.jpg" height=200  width=200><br>
    <p>Another photo of the Bugatti Veyron.</p><br>
    <img src="bgveyron3.jpg" height=200  width=200><br>
    <p>A photo of the Bugatti Veyron's interior.</p><br>
    <img src="bgveyron4.jpg" height=200  width=200><br>
    <p>Another photo of the Bugatti Veyron's interior.</p>
 </div>
    
 
 
</body>
</html>

2 Contributors
25 Replies
129 Views
3 Days Discussion Span
Latest Post 14 Years Ago Latest Post by |-|x

Dani AI

Generated 9 Months Ago

The tiny gaps your son saw are a common side effect of how HTML and CSS render inline content and default element spacing. did the right thing by changing the markup and experimenting with styles; the remaining mystery is why those small gaps show up even when images look stacked. The cause can be any of these: whitespace in the HTML source, baseline/line-height space left for inline elements, default margins on nearby elements, or interactions from positioning and the container’s formatting context.

A practical way to confirm the culprit is the browser inspector: pick one of the left links, open the computed box model and look at margin, padding, height and line-height. Toggle suspected properties off and on to see which one removes the gap. The inspector also shows text nodes and empty lines in the DOM — useful for finding accidental whitespace between elements. See MDN’s inspector guidance for quick steps: Using the Inspector.

If a different stacking method is acceptable, modern layout techniques avoid many whitespace gotchas. For example, using a column flex container stacks children without inline whitespace issues:

.linkDecor {
  display: flex;
  flex-direction: column;
  gap: 0;
}

Other approaches (changing vertical alignment on inline images, removing source whitespace, or using background images for purely decorative visuals) are valid too; each has trade-offs. Avoid global hacks unless you understand their side effects (for example, font-size:0 on a parent will hide text unless you reset child font sizes).

For reliable cross-browser defaults, prefer a lightweight normalize (such as Normalize.css) over aggressive resets. For reference on layout behavior and the properties mentioned above, the MDN docs on display, vertical-align and Flexbox are reliable, up-to-date resources.

All 25 Replies

|-|x 126 Junior Poster in Training

14 Years Ago

try removing the <br/>s from between each link and add display:block to the a style properties.
Also make sure the margin and padding is set to 0px;

Let me also make the suggestion that it is better to use the class attribute to identify groups of controls to apply the same styling to, rather than id

.im {
    ...
.pecor {
    ...

<a class="pecor" href="h.html"><img class="im" src="home.jpg" height="49" width="111" /></a>
                                            also, make sure you close your img tags  -^

Edited 14 Years Ago by |-|x

|-|x 126 Junior Poster in Training

14 Years Ago

it just goes into your css definitions like so.

#pecor {
    display:block;
    ...
}

I believe the default for an anchor (a) tag is block, but it doesn't hurt to specify.

This page explains the various value options available for the display property. Most common you will use are block, inline and none.

(also I put more notes in the other post, not sure if you saw those before your reply)

Edited 14 Years Ago by |-|x

|-|x 126 Junior Poster in Training

14 Years Ago

Please explain what are value options

I just meant the possible values to be assigned to the display property. As that w3school page describes several, but the most common ones (that I use at least) are display:block;, display:inline; and display:none;

nice link btw. :) here is a different resource if you prefer.

Edited 14 Years Ago by |-|x

|-|x 126 Junior Poster in Training

14 Years Ago

hmm... ok. check that the margin and padding for both the a and img tags are set to 0px.

I'll take another look later as well.

Edited 14 Years Ago by |-|x

|-|x 126 Junior Poster in Training

14 Years Ago

if you still have the spacing issue, try doing it this way instead:

.pecor {
    text-decoration: none;
    display: block;
    background-image: url("home.jpg");
    height: 49px;
    width: 111px;
}

and delete the img tag from inside the links.

------

I generally use photoshop for image editing, but you could try this, its supposed to be good.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jackbauer24 0 Junior Poster · Answer 1 · 2012-05-24T05:08:22+00:00

Please download (right click-save image as) all images and please download(right click-save link/target as) the index.html file. This is because the website is not able to find the home image.

jackbauer24 0 Junior Poster · Answer 2 · 2012-05-24T05:53:15+00:00

i have no idea about display:block. could you show me how to do it?

jackbauer24 0 Junior Poster · Answer 3 · 2012-05-24T06:05:42+00:00

Modifications history:-
1.All ids changed to classes.
2.Img tag closed.

Please explain what are value options. Also, I would recomend the following website to you:-
http://w3fools.com/
Please pass it on to whomever you know.

jackbauer24 0 Junior Poster · Answer 4 · 2012-05-24T06:08:13+00:00

jackbauer24 0 Junior Poster

14 Years Ago

display:block; given

jackbauer24 0 Junior Poster · Answer 5 · 2012-05-24T06:12:36+00:00

now there is a huge gap between each home(enlarge image to see). I have some work to do, I'll be back after a while.:-

jackbauer24 0 Junior Poster · Answer 6 · 2012-05-24T08:50:38+00:00

.pecor (a) =margin=0px,padding=0px;
.im (img) =margin=0px,padding=0px;
.linkDecor (div) =margin=0px,padding=0px;

Also, if you saw the <<home>> image, it doesn't look very good. Can you tell me about some free but good graphics editing/making software to use other than:-
1.Paint
2.Paint.NET
3.The GIMP

jackbauer24 0 Junior Poster · Answer 7 · 2012-05-25T03:29:57+00:00

jackbauer24 0 Junior Poster

14 Years Ago

I did what you said. Still a gap.

|-|x 126 Junior Poster in Training · Answer 8 · 2012-05-25T03:38:11+00:00

|-|x 126 Junior Poster in Training

14 Years Ago

really? can you post your code again now.

jackbauer24 0 Junior Poster · Answer 9 · 2012-05-25T03:41:02+00:00

here:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title>My first CSS page!</title>
    <style type="text/css">

       h1.floating {
        float: left;
        margin-right: 0.2px;
       }
       img.im {

           margin: 0px;
           padding: 0px;
       }
        p.decor {
            position: absolute;
            left: 150px;
            top: 150px;
            font-weight: lighter;
            font-size: 10px;
            font-size: 20px;

            font-variant: normal;
            text-indent: 50px;
            margin-left: 70px;
            margin-right: 70px;
            border: 1px dashed #00FFFB;
            padding: 10px;
            max-width: 700px; 

        }
        .pecor {
            text-decoration: none;
            display: block;
            background-image: url("home.jpg");
            height: 49px;
            width: 111px;

        }
        .linkDecor{

            margin: 0px;
            size: 40px; 
            padding:0px;
            border: 1px dotted #0D06FC;

            position: absolute;
            top: 150px;
            left: 50px;

        }
        .imDecor {
            border: 1px dashed #FC0011;
            padding: 2px;
            margin-right: 70px;

            position: absolute;
            top: 150px;
            left: 1000px;
            font-style: italic;

        }
        h1.decor {


            color: rgb(160, 0,0);
            text-align: center;
            font-variant: small-caps;
            top: 15px;
            left: -10px;
        }
        body.decor {
            background: rgb(123, 234, 12);
        }
    </style>
</head>
<body class="decor">
 <h1 class="decor">First CSS!</h1>
 <div class="linkDecor">
    <a class="pecor" href="h.html"></a><br>
    <a class="pecor" href="i.html"></a><br>
    <a class="pecor" href="i.html"></a><br>
    <a class="pecor" href="i.html"></a>
 </div>
 <div class = "imDecor">
    <img src="bgveyron1.jpg" height=200  width=200><br>
    <p>A photo of the Bugatti Veyron.</p><br>
    <img src="bgveyron2.jpg" height=200  width=200><br>
    <p>Another photo of the Bugatti Veyron.</p><br>
    <img src="bgveyron3.jpg" height=200  width=200><br>
    <p>A photo of the Bugatti Veyron's interior.</p><br>
    <img src="bgveyron4.jpg" height=200  width=200><br>
    <p>Another photo of the Bugatti Veyron's interior.</p>
 </div>
 <p class="decor">Welcome to my website. This made with very little HTML, more of it done only in CSS. Feel free to explore the place. The website was made on May 24th 2012(Thursday). Updates shall be informed of.</p>




</body>
</html>

jackbauer24 0 Junior Poster · Answer 10 · 2012-05-25T03:42:42+00:00

Theres one big improvement:- after the last <<home>> photo, no gap! yay!!!

|-|x 126 Junior Poster in Training · Answer 11 · 2012-05-25T03:50:55+00:00

ah kk... you need to remove the brs from between the a tags.

jackbauer24 0 Junior Poster · Answer 12 · 2012-05-25T03:54:09+00:00

THANKS A LOT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Though, what exactly is a <br>? I thought they shift to a new line. When you asked me to remove the <br>s, I thought they would all come on the same line. This did not happen. How? Why?

|-|x 126 Junior Poster in Training · Answer 13 · 2012-05-25T04:17:07+00:00

<BR> is a new line, but it also creates a blank line most of the time, depending on the display characteristics of it and the other elements on the page.

by specifying the display property of the a tags to be block, it tells the browser that each element is to be rendered as a block, on a new line, not next to the previous element. Hence you don't need the br's

jackbauer24 0 Junior Poster · Answer 14 · 2012-05-25T04:54:21+00:00

jackbauer24 0 Junior Poster

14 Years Ago

But doesn't a block have some whitespace above it?

|-|x 126 Junior Poster in Training · Answer 15 · 2012-05-25T05:10:16+00:00

not if you define the size (height and width) values in its css as well. By default it will be 1 line high based on the current font size. But you can override this, even set height:0px - this is how some menus and collapsing divs work, by adjusting the height value dynamically with javascript.

jackbauer24 0 Junior Poster · Answer 16 · 2012-05-25T05:18:35+00:00

so you mean if you set the height and width of a certain element whose display property is block, you don't have that whitespace? i can't understand; can you explain it to me in a simple way?

|-|x 126 Junior Poster in Training · Answer 17 · 2012-05-25T05:57:50+00:00

If you don't specify a height and width, then the browser defaults to a single "line" height.

If specified then the block element is rendered precisely to the height and width you specify. In this case there should not be extraneous whitespace.

Of course there are also margin and padding properties, which some browsers have different defaults for.
These should be set to 0px unless you specifically need/want them. And don't forget that these properties are inherited. In other words, consider the following example.

<div id="a" style="margin:5px;">
    <div id="b"></div>
</div>

in this case, both divs a and b would render with a 5px margin. In order for b not to have a margin, it must specify margin:0px.

|-|x 126 Junior Poster in Training · Answer 18 · 2012-05-25T06:01:47+00:00

Further to the above... it is common for web developers to use a 'master reset' at the top of their css definitions. The purpose of this is to set defaults for clearing margin padding and anything else you may need.

There are a few different versions of these available if you google, but this is a good place to start.

jackbauer24 0 Junior Poster · Answer 19 · 2012-05-25T11:15:02+00:00

Do you think I should get a "css reset?"
Do you think I should buy photoshop?

|-|x 126 Junior Poster in Training · Answer 20 · 2012-05-27T22:53:15+00:00

Do you think I should get a "css reset?"

I would suggest at least starting your CSS definitions off with a global selector, something like this

* {
    margin: 0;
    padding: 0;
}

Think of it like painting your canvas white before painting the picture on it. Have a look at some sample ones online and see what you think is useful. You can also use these to set global default fonts and colour schemes on a per-site basis, if it is useful to you.

Do you think I should buy photoshop?

I can't make that call for you, it is a hefty investment and would depend on your needs and usage. However, I have not come across another editor that does as much as well as PS. But, that may also just be because I'm used to it and know how to do what I need easily.

CSS space removal

Dani AI

Recommended Answers Collapse Answers

All 25 Replies

Recommended Answers