Win a copy of Murach's Java Programming this week in the Beginning Java forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Padding causing issues  RSS feed

 
raman kadam
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
  • 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.


 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66041
140
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • 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
  • 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
Author and ninkuma
Marshal
Posts: 66041
140
IntelliJ IDE Java jQuery Mac Mac OS X
  • Likes 1
  • Mark post as helpful
  • send pies
  • 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
  • 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
Author and ninkuma
Marshal
Posts: 66041
140
IntelliJ IDE Java jQuery Mac Mac OS X
  • Likes 1
  • Mark post as helpful
  • send pies
  • 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.
 
All of life is a contant education - Eleanor Roosevelt. Tiny ad:
Thoughts on deprecation in Java
https://coderanch.com/t/683016/java/Deprecation-Java
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!