• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Padding causing issues

 
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi Everybody,

I'm unable to understand why removing padding: 1px; statement in div.header shows a gap before header in the below code. Please help.


 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Welcome to the Ranch.

h1 elements have built-in top and bottom margins. If that's not what you want, remove the margins from the h1 elements.

You can see this for yourself by inspecting the element styles in the Browser Tools. Please learn how to use these tools before you write one more line of code. See the JavaScript FAQ for more info.
 
raman kadam
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello Bear,

Thank you so much for your response.

1. I understood that the default setting in H1 is causing a gap in the top section.However, I fail to understand how ' padding:1px ' can solve it.
2. Does it mean padding is replacing margin here ?

I compared the two screenshots using Firebug for the Layout but didn't understand much except the fact that padding 1 appears now. Also, (attaching here).
3. The cursor when placed on line doesn't highlight anything whereas it does highlight the top section when padding is inserted.
4. Also, the Layout section shows width changed from 16 to 59 ! what could be the reason here ?

Sorry for the trouble, I'm learning CSS.
Kindly suggest.
WithoutPadding.PNG
[Thumbnail for WithoutPadding.PNG]
WithPadding.PNG
[Thumbnail for WithPadding.PNG]
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

raman kadam wrote:
1. I understood that the default setting in H1 is causing a gap in the top section.However, I fail to understand how ' padding:1px ' can solve it.


Without the padding, the background color is only being applied to where actual content is, and that is behind the h1. when you add padding, the entire header is considered to have content, so the background applies to the whole header. It is kinda weird, but that's how it works.

2. Does it mean padding is replacing margin here ?


No. See above. The margin is still there. All the padding affects is the background color of div.header.

 
raman kadam
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thank you so much Bear !
Really appreciate for your time..

Where can I learn all these important points ?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Subtle things like this are learned through trial and error, my friend. And poking around in the Dev Tools a lot.
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic