html - css margin and padding newbie question -


i'm struggling under behaviour of following html , css code. i'm aware of box layouts , margin collapsing doesn't seem explain following:

1) using code below, unmodified, logo shown 10px of white space between , top of page , 4 or 5 pixels below of color given #allcontent.background-color. interestingly if set font-size property within body 0px removes white space above logo , 4 or 5 pixels below it.

2) if padding value within #allcontent changed 0px 1px 10px of padding added above , below logo color specified #allcontent.background-color.

index.html file: 

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en"   "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">     <head>         <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />         <title>home</title>         <link rel="stylesheet" type="text/css" href="my.css" />     </head>       <body>         <div id="allcontent">         <div id="header">                        <p>             <img width="200" height="60" src="images/logo.gif" alt="logo" />             </p>             </div>         </div>           </body> </html>

my.css file: 

body {           margin: 0px;     padding: 0px; }  #allcontent{     background-color: #dddddd;     padding: 0px;     margin: 0px;     }  #header {        padding: 0px;     margin: 0px; }

this code: http://jsbin.com/eronaq

starting easier issue:

the logo shown [..] 4 or 5 pixels below

that gap space reserved descenders in text letters g , p.

you can fix in few ways. example, setting display: block or vertical-align top or bottom on img.

display: block: http://jsbin.com/eronaq/2

the logo shown 10px of white space between , top of page

see: http://reference.sitepoint.com/css/collapsingmargins

that space margin-top on p collapsing through way body, because there nothing stop doing defined rules of collapsing margins.

by “touch,” mean places @ no padding, borders, or content exist between adjacent margins.


Comments

Post a Comment

Popular posts from this blog

c++ - Is it possible to compile a VST on linux? -

for class project i'm attempting write vst plugin backed cuda. current cuda workflow on linux box, i'd prefer compile , link there. according wikipedia , should possible (i couldn't find steinberg documentation relevant linux) can't find makefile or instructions on how build if aren't using xcode or visual studio. i'm vst 3 sdk doesn't support linux. when try compile plugin under linux, error: ./base/source/fatomic.cpp:39:30: fatal error: libkern/osatomic.h: no such file or directory this issue caused following code in "vst3 sdk/base/source/fatomic.cpp" #if mac #include <libkern/osatomic.h> #if mac_os_x_version_min_required > mac_os_x_version_10_4 #define native_atomic_type (volatile int32_t*) #else #define native_atomic_type (int32_t*) #endif #elif windows #include <windows.h> #endif but hope compiling under linux work vst sdk 2.4. reading. jvstwrapper seems run on lin...
Read more

java - Output of Eclipse is rubbish -

i want write program in eclipse language different english. when display output using system.out program, displays output correctly in console editor. when accept input console , output it, output rubbish. how can solve it. many thnaks i'm not sure if problem, have character encoding problem. make sure you're using unicode, utf-8. you can read more @ official docs converting non-unicode text .
Read more

jquery - Confused with JSON data and normal data in Django ajax request -

i read json internet still have not got grasp of it. reading article http://webcloud.se/log/ajax-in-django-with-jquery/ i not understood first part function using json def xhr_test(request, format): if request.is_ajax(): if format == 'xml': mimetype = 'application/xml' if format == 'json': mimetype = 'application/javascript' data = serializers.serialize(format, examplemodel.objects.all()) return httpresponse(data,mimetype) # if want prevent non xhr calls else: return httpresponse(status=400) my main problems are from function getting format variable does format json mean data given function json or data recived json can give me simple example ouput of function data = serializers.serialize(format, examplemodel.objects.all()) how use data when response in jquery function if don't use json in above function how input , response chnage thanks ...
Read more