Jump to content

Search the Community

Showing results for tags 'margin'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 19 results

  1. I am trying to have my background in my division take up it's full height but it is only taking up the height of the header. I've tried setting the height but it doesn't budge. It will only fill as much content as I have in the section, the problem is I only want the one header and that's all. I am simply trying to recreate a webpage that I made on weebly with for my class in html but I am really stuck on this. I will post the code below and a screen shot. <!DOCTYPE html> <html> <head> <style> .first { background-image: url('trampoline.jpg'); margin-bottom: 1000px; background-size: cover; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; font-family: arial; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } .footer { background-color: grey; color: white; padding: 15px; } </style> </head> <body> <ul> <li style="float:right"><a href="#news">HOME</a></li> <li style="float:right"><a href="#contact">ABOUT ME</a></li> <li style="float:right"><a href="#about">ABOUT FAMILY</a></li> <li style="float:right"><a href="#about2">ABOUT SCHOOL</a></li> </ul> <div class="first"> <h1>Hi, I'm Mr. Buza. Technology teacher</h1> </div> <div class="clearfix"> <div class="column content"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> </div> <div class="footer"> <p>Footer Text</p> </div> </body> </html>
  2. Please try this code. <!DOCTYPE html> <html> <head> <style> div { background-color: lightgrey; width: 50px; border: 25px solid green; padding: 10px; margin-right: 10px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px; } </style> </head> <body> <h2>Testing Margins</h2> <div style="display:inline-block;">Box 1</div> <div style="display:inline-block;">Box 2</div> <br /> <div style="display:inline-block;">Box 3</div> <div style="display:inline-block;">Box 4</div> </body> </html> Then try it with all four margins set to 0px. Does the left and right margins completely disappear. For me, I still see some margin on the left and right. How can I get the left and the right margins to completely disappear?
  3. HTML CODE:- <body> <main> <article> <header> <h1>Azure Kingfisher</h1> </header><hr> <p>This stunning little kingfisher is common on waterways across the <a title="Top End Australia Video"; href=" " target="_blank">Top End</a>, but can be difficult to see well. this is some text about the kingfisher this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.sdnf iuhrwei hear hoheo eogflkvoiejar glk oisdfj w oaif iasdfi asoif asidfjsaifdj osaijdfiasdf insadfoi</p> <p> <figure> <a href="azure.html" target="_blank"> <img title="Click to enlarge" src="thumbnails/birdpict.png" alt="thumbnail" style="float:left; height:150px; width:110px" /></a> </figure> </p> <p id="arc2">this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.sdfh osadf' sfoi jsdfj sdofj sdfw'ej fsdlkf aslkfl askdfn sadf sadf oifn afoin asdfn saodifnwieafn'o iwnfkanef iewfan</p> </article> </main> Linked CSS:- body{ background-color: #1eed8c; margin-right: 20%; margin-left: 20%; border: 2px dotted blue; font-family: sans-serif; line-height: 180%; } h1{ color: blue; text-align: center; } p#arc2{ padding-left: 5px 5px 5px 5px; } article{ color: green; padding: 5px 5px 5px 5px; border-bottom: 1px solid rgb(88, 88, 88); } img{border: 2px solid black;} footer{ margin-left: 74%; } a:link {color: blue; background-color: transparent; text-decoration: none;} a:visited {color: maroon; background-color: transparent; text-decoration: underlined;} a:hover {color: yellow; background-color: transparent; text-decoration: none;} The pic of the kingfisher, which is a thumbnail, is right beside the text= arc2. There is no space between the image and the text. I tried padding the #parc2 (second article that was beside the image but still no effect). The image has a black border that I don't want to remove. If I add padding to the image the border sticks to the text(arc2).
  4. margin-top and div

    I have a question about margin-top. I made a css script with span columns. The higher columns are supposed to push the lower ones down. I place them in a div, in here multiple columns. The second column though, takes the top of the outer div as reference (not sure if that tis called parent). I find this strange. I tried to make a second div inside but it didnt work. Can you only use div as a reference point or also a span element or p ?
  5. Dear All: In a W3school's tutorial is this tip: Tip: When aligning elements with position, always define margin and padding for the <body> element. This is to avoid visual differences in different browsers. Do we still need to do this if we have already declared the margin and padding for the whole page, e.g. *{margin: 0; padding:0;} and why?
  6. It is a three column theme. I want to make the space between the sidebar and the main content area narrower. And also widen both sidebars outwards. The site is: http://lifelessonshome.com/
  7. Remove the "bleeding" of a text selection

    Hello, I wanted my website's display area to be exactly 768 px centered on the page. So here's the css properties I applied to the "main" div that contains every element I add on my webpage: div#main { margin-left: auto ; margin-right: auto ; width : 768px ;} It works, fine, however when I select several lines of text inside it, the blue selection is bleeding all the way to the left and right of the window (see attached image). How can I prevent this from happening? Thanks for reading! Thomas
  8. Help with header

    Hey guys, this is probably a newbie topic, but I can't seem to get the header to work for a website I'm making. I want to have it the where the div tag (or any other tag if it's better suited) be flush with the sides of the screen, much like it is on this site, and many others, such as the face punch forums. I have have tinkered, fiddled, and even copied directly from templates, in an attempt to make it do this. Butt every time, theres ALWAYS a 10px gap to the left side of the box. I have done and researched all I can, and I still cannot figure out why this is happening. What do I have to do to make it work? Also, sorry if I sound annoyed. I have been fighting this for almost 2 full days now with no results.
  9. See http://jsfiddle.net/terryds/H3A4M/ The margin-top i want to add isn't working... I've tried the margin-bottom, and it gives me nothing too... Please help me...
  10. hey everyone, i have been sitting and trying to figure out my "footer" but without succes, what i want is my class "bund" to stay at bottom of the class "siden" i use siden to have all the other article in it, i dont want it to stay at bottom if theres no text on site, i just want it to float to bottom of the content. right now its like 10 px above the bottom, and i cant get it down so its margin 0. so thats why i asking in here. hope some can help fast. how its look with the code http://www.miltons.dk/nya/ Temi this my "php" <!DOCTYPE html><html lang="da"> <head> <meta charset="ISO-8859-1" /> <title>Miltons Trimning</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body class="siden"> <article class="alt"> <article class="hoved"> <?php include("hoved.php"); ?> </article> <article class="link"> <?php include("link.php"); ?> </article> <article class="indhold"> <p>bare en tdfest se selv æøå jhsfdjkfhsdjkhfjks dhjkfhsdkjfh jksdhf jkhsdjkfh jksnjkhfdsjhf jsdhf jshdjk fhjksh fjksdhjkfh jhewbjks dbfjsdkhfj sdhjfkhsdjkfh sjdkhfjkshdjkfh jskdhfjshf jkhebjkdsbjkfhsdjk hfjkshfjk sdhjkfhjk weubfjk fjhdsjfhsdkhfjks dhfjksdh jkfhsdjkfh kjsdhfjks dhj</p> <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> </article> <article class="bund"> <?php include("bund.php"); ?> </article> </article> </body></html> this my css: .siden{margin-top: 5px;margin-left: auto;margin-right: auto;margin-bottom: 5px;width: 1200px;border: 1px solid green;}p{ margin-left: 5px; margin-right: 5px; margin-top: 0px;}.alt{ background-color: gray; height: 100%;}.hoved{ height: 240px;}.link{ margin-top: 20px;height: 40px;text-align: center;margin-bottom: 10px;}.indhold{ background-color: gray;}.bund{ background-color: gray; margin-bottom: 0px;}.menulinksvenstre { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -webkit-border-top-left-radius:20px; -moz-border-radius-topleft:20px; border-top-left-radius:20px; -webkit-border-bottom-left-radius:20px; -moz-border-radius-bottomleft:20px; border-bottom-left-radius:20px; text-indent:0px; border:0px solid #84bbf3; display:inline-block; color:#ffffff; font-family:Georgia; font-size:20px; font-weight:bold; font-style:normal; height:40px; line-height:40px; width:auto; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #528ecc;}.menulinksmidt { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; text-indent:0px; border:0px solid #84bbf3; display:inline-block; color:#ffffff; font-family:Georgia; font-size:20px; font-weight:bold; font-style:normal; height:40px; line-height:40px; width:auto; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #528ecc;}.menulinkshjre { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -webkit-border-top-right-radius:20px; -moz-border-radius-topright:20px; border-top-right-radius:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomright:20px; border-bottom-right-radius:20px; text-indent:0px; border:0px solid #84bbf3; display:inline-block; color:#ffffff; font-family:Georgia; font-size:20px; font-weight:bold; font-style:normal; height:40px; line-height:40px; width:auto; text-decoration:none; text-align:center; text-shadow:1px 1px 0px #528ecc;}.menulinksvenstre:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5;}.menulinksvenstre:active { position:relative; top:1px;}.menulinkshjre:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5;}.menulinkshjre:active { position:relative; top:1px;}.menulinksmidt:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) ); background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff'); background-color:#378de5;}.menulinksmidt:active { position:relative; top:1px;}
  11. tr, td border issues

    Hey guys, I can't figure out why my top image on my table isn't working right. The bottom border won't show up and the image is clearly readjusting to something because the quality is awful when I put it into my coding, but it's fine on photobucket. I've adjusted the whole table size, the tr size, the td size, the padding and the margin on absolutely everything. I can't figure it out. Please help! Page i'm struggling with: audreyholmesmusic.webs.com/testhome.htm Let me know if 'view source' doesnt work and you need the code.
  12. Dear people I'm new here and I'm making my first steps in responsive design. I'm not english speaker and I will try to explain my problem in my better english. I'm testing a simple grid of 4 columns using 4 divs with width = 23 % (each div) and left and right margins = 1 %........ margin: 0% 1% 15px 1%; padding: 0% 0% 0% 0%; In other words..... 1% + 23% + 1% + 1% + 23% + 1% + 1% + 23% + 1% + 1% + 23% + 1% = 100 % ------------------- ------------------- -------------------- ------------------- All this works fine in Internet Explorer, Mozilla, Opera and Safari and each div have the same separation respect the neighbor div,..... ... BUT THIS NOT HAPPENS IN CHROME!!!! After this, I tried usig PADDING: margin: 0% 0% 0% 0%; padding: 0% 1% 15px 1%; and the results are different. With "Padding" it works fine in Internet Explorer, Chrome, Mozilla and Opera and each div have the same separation respect the neighbor div... ... BUT THIS NOT HAPPENS IN SAFARI!!!! I can't understand why this happens because it is a very basic concept... margin... padding.... there are no complicated things. I attach the TESTING MARGINS AND PADDINGS.zip file containing a folder with html and jpg files to you can view it. HTML files contains the CSS code into each html file. I think the margin solution is better, but my question is: How to make only for Chrome ...... that the CSS code specify the use padding in place of margins?? Do i need to use some prefix like -webkit- , etc? I hope you can help me to solve this. Thank you in advance!TESTING MARGINS AND PADDINGS.zip GusSiglo21
  13. Aligning <div>

    Hello, I'm experiencing a little problem when trying to align different div sections. The page loads correctly in Safari/Chrome but when using other browsers, there is a little displacement (see image). I don't know what is causing the problem. Hope anyone of you can help me. Thanks in advance! <html><head>(...)<style>body{background-color:rgb(235,235,235);}.header{background-color:rgb(17,76,131);position:absolute;top:0px;left:0px;right:0px;height:120px;}.base{background-color:rgb(250,193,37);margin:auto;padding-bottom:15px;width:980px;padding-top:125px;height:auto;text-align:center;}.tabbed_box{margin:0px auto 0px auto;width:950px;}.tabbed_area{border:1px solid #494e52;background-color:#636d76;padding:8px;}ul.tabs{margin:0px;padding:0px;margin-top:5px;margin-bottom:5px;}ul.tabs li {list-style:none;display:inline;}ul.tabs li a{background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;border:1px solid #464c54;}ul.tabs li a:hover{background-color:#2f343a;border-color:#2f343a;}ul.tabs li a.active{background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom:1px solid red;}ul.list{list-style-type: square;font-family:"Segoe UI", sans-serif;font-size:14px;}.content{background-color:#ffffff;padding:10px;border:1px solid #464c54;text-align:left;font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;}#content_2,#content_3,#content_4,#content_5,#content_6,#content_7,#content_8,#content_9 {display:none;}</style></head><body><div class="header">Test?</div><div class="base"> <div id="tabbed_box_1" class="tabbed_box"> <div class="tabbed_area"> <script src="js/functions.js" type="text/javascript"></script> <ul class="tabs"> <li><a href="javascript:tabSwitch_2(1,9,'tab_','content_');" id="tab_1" class="active">Ligging</a></li> <li><a href="javascript:tabSwitch_2(2,9,'tab_','content_');" id="tab_2">Faciliteiten</a></li> <li><a href="javascript:tabSwitch_2(3,9,'tab_','content_');" id="tab_3">Logies</a></li> <li><a href="javascript:tabSwitch_2(4,9,'tab_','content_');" id="tab_4">Eten & Drinken</a></li> <li><a href="javascript:tabSwitch_2(5,9,'tab_','content_');" id="tab_5">Sport</a></li> <li><a href="javascript:tabSwitch_2(6,9,'tab_','content_');" id="tab_6">Animatie</a></li> <li><a href="javascript:tabSwitch_2(7,9,'tab_','content_');" id="tab_7">Kinderen</a></li> <li><a href="javascript:tabSwitch_2(8,9,'tab_','content_');" id="tab_8">Extra</a></li> <li><a href="javascript:tabSwitch_2(9,9,'tab_','content_');" id="tab_9">Prijzen & Contact</a></li> </ul> <div id="content_1" class="content">Content for Tab 1</div> <div id="content_2" class="content">Content for Tab 2</div> <div id="content_3" class="content">Content for Tab 3</div> <div id="content_4" class="content">Content for Tab 4</div> <div id="content_5" class="content">Content for Tab 5</div> <div id="content_6" class="content">Content for Tab 6</div> <div id="content_7" class="content">Content for Tab 7</div> <div id="content_8" class="content">Content for Tab 8</div> <div id="content_9" class="content">Content for Tab 9</div> </div> </div></div></body></html>
  14. Problem With Div Extension

    The div "rightLines" is extending past the display window in the browser, which is creating an unwanted horizontal scrollbar. Based on the CSS, I can understand why this is happening, but the confusing part is that the same thing doesn't happen for "hNavigation." Why is this? What I'd like to accomplish: To have the "hNavigation" div, and the "rightLines" div to fill the remaining space (of the window) on either side of the "mainContent" div, without having to specify a specific size for both. Perhaps this would be better accomplished with tables? Any help would be appreciated. Here is the code: <body id="theBody"><div id="mainSection"> <div id="theHeader"> <div id="headerStripes"> </div> </div> <div id="hNavigation"> </div> <div id="rightLines"> </div> <div id="mainContent"> </div> </div></body> /** MAIN PAGE **//*==== universal ====*/a {text-decoration: none;}img { border-style: none; text-decoration: none;}#theBody {margin: 0px;padding: 0px;}/*==== header ====*/ #theHeader {height: 80px;width: auto;background-image: url(header-color.png);background-repeat: repeat;position: relative;} #headerStripes {height: 75px;width: auto;background-image: url(diagonal-lines-pattern.png);}/*==== mainContent ====*/#mainSection {background-image: url(diagonal-lines-pattern.png);margin-left: auto;margin-right: auto;background-repeat: repeat;height: 100%;width: 100%;position: absolute; } #mainContent {width: 800px;height: 538px;padding-top: 32px;margin-top: -5px;margin-left: -400px;background-color: #f9e6d7;z-index: -100;position: relative;left: 50%;}#hNavigation {background-color: #000000;width: 50%;height: 564px;margin-left: -400px;float: left; }#rightLines {background-color: #000000;width: 50%;height: 564px;float: right;margin-right: -400px;}
  15. Is CSS Broken? DIV Margin Issues

    I've been having some problems with getting what I wanted out of divs, and I am forced to come to the conclusion that CSS is broken. I've attached an HTML file to demonstrate the problems - you will need to edit its source HTML and follow the instructions to see the problems. I fully accept that *I* may be the problem rather than CSS, and at least all major browsers are suffering the same problem, but I really feel that CSS is at fault here and I was wondering what others thought? One challenge is to get a box to fit within the browser window (no scrolling required) with a 10 pixel border *all* around (no matter what size the browser window becomes), and another challenge is to get a fixed-width box to anchor itself to the right side of the browser window so that it is unaffected by scrolling (i.e., fixed positioning). In neither case are you allowed to use tables, and for the right-anchored box you're not allowed to use a fixed left position / margin (in other words, changing the width of the browser should keep the box anchored to the right). (This is not homework, BTW, I left school / college / university years ago! It's just what caused me to write this post.) css_issues.html
  16. Browser Display Differences

    Hi guys, I am currently having some issues with certain elements of a website I am building displaying slightly differently in different browsers. One example is: I have a form which contains two text input fields and two buttons. I have the text input fields one beneath the other and the two buttons below them, side-by-side. They sit beside one another fine in Chrome and IE9 (believe it or not!) and barely in Opera. However, in Firefox they do not. I have given the buttons a class and played around with the margins and padding, I also floated each button to the left. I am also aware that each browser has it's own default CSS rules? I imagine this would play a big part in elements displaying differently. Is there a way that I can remove each browsers default rules? I hope someone can help me! Thanks in advance!
  17. Hi I am just self-learning CSS and am practising in a new WordPress site. It is only hosted locally for now so sorry I can't provide a link. I'm sure this is easy for a CSS guru though I am having trouble center aligning the text (i.e page links) within my horizontal navigation menus. I tried using padding (which works) though discovered it is displayed differently in different browsers (I am still learning about using universal CSS for multiple browsers). I read a few tutorials regarding using "margin: auto" and "align:center" though I have no idea where to use it in my code. I have tried a few things though can't get anything to work so any guidance would be much appreciated. [/font][/color] #subnav {-khtml-border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;clear: both;color: #555;margin: 0 auto 10px;margin-top: -8px;overflow: hidden;text-transform: uppercase;width: 920px;background-image:url(/wp-content/themes/child/images/banner1.png);} #subnav ul {float: left;width: 100%;} #subnav li {float: left;list-style-type: none;text-align: center;} #subnav li a {color: #526b91;display: block;font-family: 'Courier New', 'Arial','Sans Serif';font-size: 12px;padding: 8px 18px 6px 18px;position: relative;text-decoration: none;//text-indent: -9999px;} #subnav li a:hover,#subnav li a:active,#subnav li:hover a,#subnav .current_page_item a,#subnav .current-cat a,#subnav .current-menu-item a {color: #526b91;} #subnav li a:hover {color: #222;} #subnav li li a,#subnav li li a:link,#subnav li li a:visited {background-color: #f5f5f5;border: 1px solid #ddd;border-top-width: 0;color: #555;font-size: 11px;padding: 5px 10px;position: relative;text-transform: none;width: 128px;} #subnav li li a:hover,#subnav li li a:active {color: #222;} #subnav li ul {height: auto;left: -9999px;margin: 0 0 0 -1px;position: absolute;width: 150px;z-index: 9999;} #subnav li ul a {width: 130px;} #subnav li ul ul {margin: -33px 0 0 149px;} #subnav li:hover>ul,#subnav li.sfHover ul {left: auto;} [color=#282828][font=helvetica, arial, sans-serif] Thanks so much.
  18. I have a div animated by incremented margin-left when the user clicks a button. I would like to force the animation to stop at a specific margin-left value and callback a different animation. So if the user tries to click too far it prevents them from doing so. Suggestions? I'd like to do it with margin because it'd be easier to edit later, but if I have to use .position.left as a variable, I'll take the code for that just as well. Here's a wacky selector I tried, to no avail, if it helps convey my intention: $('.slidingDiv[style*=margin-left:80px]').stop().animate(.....); I didn't bind it to a .click because I want to be able to stop any-size div at any given point rather than map it out explicitly. Thanks!
  19. Inline Image Margin Problem

    #footer {width: 500px;height: 50px;background-color: #FF9999;position: fixed;bottom: 0;}#menu {width: 500px;height: 50px;margin: 0;padding: 0;}img {width: 100px;height: 100px;}</style></head><body><div id="footer"> <div id="menu"> <img src="http://slayeroffice.com/code/imageCrossFade/img1.jpg" alt="Swimming Pool Water" /> <img src="http://slayeroffice.com/code/imageCrossFade/img2.jpg" alt="Notebook" /> <img src="http://slayeroffice.com/code/imageCrossFade/img3.jpg" alt="Bottle Neck" /> <img src="http://slayeroffice.com/code/imageCrossFade/img4.jpg" alt="Nail in a Board" /> </div></div></body></html> Why padding and margin: 0 does not work to remove the little space between each inline image?
×