 Padding problem |
  |
| msucimaster |
 May 5 2020, 12:56 PM
Post
#1
|
|
Newbie  Group: Members Posts: 11 Joined: 29-April 20 Member No.: 27,307  |
Thanks for solving my last problem. I have a new issue that puzzles me.
Inside a div I want to have a colored bar over the full width. Inside this bar I have some text. That text should be to the left with some margin. It is that margin that gives me a problem. I try to assign it with padding-left. It works for the text. Unfortunately a side effect is that bar grows with the size of the padding and now goes over the boundary of the enclosing div. What am I doing wrong? The code I have is: <div class="subBar">My Text</div> div.subBar { width: 100%; height: 28px; margin-top: 20px; font-size: 20px; text-align: left; padding-left:120px; background: #ee7; } |
  |
 
|
| Christian J |
May 5 2020, 02:00 PM
Post
#2
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
QUOTE(msucimaster @ May 5 2020, 07:56 PM)  It is that margin that gives me a problem. I try to assign it with padding-left. Note that margin and padding are different things in CSS. QUOTE Unfortunately a side effect is that bar grows with the size of the padding and now goes over the boundary of the enclosing div. That's how the CSS box model normally works. With "box-sizing: border-box" it should behave more like you want, see https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing for a full explanation. |
|
|
|
| pandy |
May 5 2020, 03:06 PM
Post
#3
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE(Christian J @ May 5 2020, 09:00 PM) Note that margin and padding are different things in CSS. Aren't they always?  |
|
|
|
| Christian J |
May 6 2020, 05:40 AM
Post
#4
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
QUOTE(pandy @ May 5 2020, 10:06 PM) QUOTE(Christian J @ May 5 2020, 09:00 PM) Note that margin and padding are different things in CSS. Aren't they always? I suppose so.  But in webdesign contexts, my impression is that people mostly use the word margin if they've never heard of CSS padding. |
|
|
|
| pandy |
May 6 2020, 11:13 AM
Post
#5
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Doesn't change what it is. And there were margin and padding in HTML already.
I was joking, but since you bit...  |
|
|
|
| msucimaster |
May 6 2020, 12:25 PM
Post
#6
|
|
Newbie Group: Members Posts: 11 Joined: 29-April 20 Member No.: 27,307 |
QUOTE That's how the CSS box model normally works. With "box-sizing: border-box" it should behave more like you want, see https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing for a full explanation. Thanks, that worked for me. |
|
|
|
| deb1 |
May 7 2020, 02:45 PM
Post
#7
|
|
Advanced Member Group: Members Posts: 109 Joined: 7-May 20 Member No.: 27,330 |
Please can someone tell me what is padding?
|
|
|
|
| pandy |
May 7 2020, 05:02 PM
Post
#8
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Padding is inside the box. Margin is outside. Like this.
CODE <!DOCTYPE html> <html> <head> <title>Margin/padding</title> <style type="text/css"> .outer { background: red; border: 1px solid black; margin-bottom: 5em } .inner { background: yellow; width: 5em } #margin { margin: 5em } #padding { padding: 5em } </style> </head> <body> <p> No margin or padding on the yellow box.</p> <div class="outer"> <div class="inner">TEST</div> </div> <p> Margin on the yellow box.</p> <div class="outer"> <div class="inner" id="margin">TEST</div> </div> <p> Padding on the yellow box.</p> <div class="outer"> <div class="inner" id="padding">TEST</div> </div> </body> </html>  It's just the styling of the inner yellow box that's interesting. The outer red box is just for show. |
|
|
|
| deb1 |
May 7 2020, 10:29 PM
Post
#9
|
|
Advanced Member Group: Members Posts: 109 Joined: 7-May 20 Member No.: 27,330 |
So basically padding is putting margin around a box...correct?
Also when is <div> tag used ? Is it used when dividing the page into sections? |
|
|
|
| pandy |
May 8 2020, 02:52 AM
Post
#10
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
QUOTE(deb1 @ May 8 2020, 05:29 AM) So basically padding is putting margin around a box...correct? No. Margin is putting margin around a box. See it like this. Both margin and padding add extra space. One outside the box and one inside the box. Think of a real box that you send something in by post. If you wrap the box in several layers of corrugated cardboard, that can be compared to margin. If you stuff it full of foam beads to protect the valuable item in the middle of the box, that's padding. The difference from a real box is that padding actually makes a HTML box expand, while the real box does not. If you look at my padding example above you can see that the yellow box with padding is much larger than the one without. While margin acts the way that it pushes other content away, or pushes the box itself away from its surroundings. You can see in the margin example that the yellow box is the same size as the box without padding or margin, but it has been pushed to another position. And its margins have forced the DIV that contains it to expand. QUOTE Also when is <div> tag used ? Is it used when dividing the page into sections? It's used to create sections, divisions, to group things together. It can also be used when no other suitable block level element exists. DIV has no special features at all. It's not needed to apply CSS, something that's often believed. It's just an anonymous block level element that can come in handy at times. Use DIV and SPAN sparingly. Use meaningful elements like paragraphs, headings, lists and so on when you can. |
|
|
|
| deb1 |
May 8 2020, 07:53 AM
Post
#11
|
|
Advanced Member Group: Members Posts: 109 Joined: 7-May 20 Member No.: 27,330 |
So for the padding example your saying the item which is in middle is called padding....correct?
For the div tag I understand it now. |
|
|
|
| pandy |
May 8 2020, 09:46 AM
Post
#12
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Not really.
There's a yellow box and a red box. The yellow box is inside the red box. If we put padding INSIDE the yellow box, it becomes larger. Content don't go in the padding, the padding is between the borders of the box and the content (the word TEST in this case). Margin is extra space that's added OUTSIDE the yellow box. For example, the space between paragraphs on a page, what makes us see them as paragraphs, is margin. Browsers add it by default. It can be a top margin, a bottom margin or both. You can control that margin yourself with CSS. Play around with it a little and I think you'll get what's what and where it is. |
|
|
|
| deb1 |
May 8 2020, 10:00 AM
Post
#13
|
|
Advanced Member Group: Members Posts: 109 Joined: 7-May 20 Member No.: 27,330 |
So tell me if I am correct or wrong.
With th first example your basically saying the space between the border of the yellow box and the content in this case it's "test"..... am I correct? |
|
|
|
| pandy |
May 8 2020, 10:14 AM
Post
#14
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Does this help? Padding is space inside the yellow box and makes it larger. Margin is outside the yellow box. It doesn't affect the yellow box's size but may affect the size of a containing box (the red box) since it pushes things away.
 |
|
|
|
| pandy |
May 8 2020, 10:39 AM
Post
#15
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Maybe the red box confuses you. Try this instead. A page filled with text and just two yellow boxes, no outer box.
QUOTE <!DOCTYPE html> <html> <head> <title>Margin/padding</title> <style type="text/css"> .box { background: yellow; float: left; border: 2px solid black } #margin { margin: 5em } #padding { padding: 5em } </style> </head> <body> <p> The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p> <div class="box" id="padding">Padding</div> <p> The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p> <p> The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p> <p> The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p> <p> The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p> <p> The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p> <p> The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p> <div class="box" id="margin">Margin</div> <p> The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p> <p> The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p> <p> The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p> <p> The DIV element defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another DIV.</p> <p> The DIV element is most useful in combination with the CLASS, ID, or LANG attributes. For example, a navigation bar could be contained within a DIV marked as CLASS=navbar, allowing the author to use style sheets to easily change the background of all navigation bars on a site, or to eliminate navigation bars when printing.</p> </body> </html>  See? Padding creates space inside the box and margin outside. |
|
|
|
| deb1 |
May 8 2020, 11:09 AM
Post
#16
|
|
Advanced Member Group: Members Posts: 109 Joined: 7-May 20 Member No.: 27,330 |
I think I understand the second example better. So basically the padding is between the content (padding) and the border of the box . All that yellow color is the padding .
And the margin is outside the box and the text around the box How about now? Did I understand it now? |
|
|
|
| pandy |
May 8 2020, 12:54 PM
Post
#17
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Yes, I think you did.
|
|
|
|
| deb1 |
May 8 2020, 01:09 PM
Post
#18
|
|
Advanced Member Group: Members Posts: 109 Joined: 7-May 20 Member No.: 27,330 |
Thank you so much for being patient with me and explaining it to me. I really appreciate it. I am not that like others how they understand at once. Some things I do and some it just takes time for me to understand. In this regard you have helped me so much. I also hope that of if I have any more questions for html you will help me understand it
|
|
|
|
| pandy |
May 8 2020, 03:35 PM
Post
#19
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You are welcome. Of course you can ask more questions.
|
|
|
|
| deb1 |
May 8 2020, 11:06 PM
Post
#20
|
|
Advanced Member Group: Members Posts: 109 Joined: 7-May 20 Member No.: 27,330 |
What is the difference between java and javascript?
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 18th April 2024 - 05:01 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC