Asked  7 Months ago    Answers:  5   Viewed   29 times

I am admittedly a beginner, but I also did a fair amount of searching before posting this. There seems to be extra space around my div element. I also would like to point out that I tried many combinations of border: 0, padding:0, etc. and nothing seemed to get rid of the white space.

Here is the code:

<html>
<head>
    <style type="text/css">
        #header_div  {
            background: #0A62AA;
            height: 64px;
            min-width: 500px;
        } 
        #vipcentral_logo { float:left;  margin: 0 0 0 0; }
        #intel_logo      { float:right; margin: 0 0 0 0; }
    </style>
</head>
<body>
    <div id="header_div">
        <img src="header_logo.png" id="vipcentral_logo">
        <img src="intel_logo.png" id="intel_logo"/>
    </div>
</body>

This is what it looks like (I inserted red arrows to explicitly call out the extra space):

Extra space around a div element

I was expecting the blue color to abut directly to the browser edges and toolbar. The images are both exactly 64 pixels tall and have the same background color as the one assigned to #header_div. Any information would be greatly appreciated.

 Answers

20

body has default margins: http://www.w3.org/TR/CSS2/sample.html

body { margin:0; } /* Remove body margins */

Or you could use this useful Global reset

* { margin:0; padding:0; box-sizing:border-box; }

If you want something less * global than:

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

some other CSS Reset:

http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/

Tuesday, June 1, 2021
 
Raef
answered 7 Months ago
77

Try this CSS:

a:active, a:selected, a:visited { 
    border: none;
    outline: none;
}

Note that this has to be after any a:hover rules. Thanks to PEra in the comments for suggesting using the a:selected selector as well.

NOTE

The above does not work in IE 9. Removing a:selected causes it to work in IE9.

Thursday, June 10, 2021
 
juananrey
answered 6 Months ago
55

If your margin is set on the body, then setting the background color of the html tag should color the margin area

html { background-color: black; }
body { margin:50px; background-color: white; }

http://jsfiddle.net/m3zzb/

Or as dmackerman suggestions, set a margin of 0, but a border of the size you want the margin to be and set the border-color

Monday, August 9, 2021
 
Corsair
answered 4 Months ago
32

Try the following adjustment to your CSS:

pre > code {
    white-space: pre;
    margin-top: -1.00em;
    display: block;
}

You can also leave out:

pre > code > strong:first-of-type { margin-top: 10px; }  /** not needed **/

Fiddle: http://jsfiddle.net/audetwebdesign/WscKu/2/

Tested in Firefox on Windows 7, should work fine, basic CSS 2.1, nothing exotic.

How This Works

For visual formatting of your HTML source code, you have a line-feed after <pre><code>, which creates a single character line in your rendered content, which will be 1.00em tall.

You can compensate by setting the top margin to the <code> block to -1.00em. However, for top/bottom margins to work, you need to set display: block to the <code> element.

Sunday, November 28, 2021
 
ala
answered 1 Week ago
ala
69

Best thing I can come up with for a CSS only solution, is playing around with float:left and float:right on different divs. But you will probably still need javascript to assign the right properties to the right divs.

Here is an example using float:right; : http://jsfiddle.net/ZMvdy/6/

There are script that do this automatically for you, they basically look at the size of the elements and then use absolute positioning to fit them all together.

Saturday, December 4, 2021
 
Seán McCabe
answered 3 Days ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share