The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

7 Pages V  1 2 3 > »   
Reply to this topicStart new topic
> Padding problem
msucimaster
post May 5 2020, 12:56 PM
Post #1





Group: Members
Posts: 7
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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 5 2020, 02:00 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,462
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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 5 2020, 03:06 PM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,881
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? tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 6 2020, 05:40 AM
Post #4


.
********

Group: WDG Moderators
Posts: 8,462
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? tongue.gif

I suppose so. smile.gif But in webdesign contexts, my impression is that people mostly use the word margin if they've never heard of CSS padding.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 6 2020, 11:13 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,881
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... biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
msucimaster
post May 6 2020, 12:25 PM
Post #6





Group: Members
Posts: 7
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 7 2020, 02:45 PM
Post #7


Member
***

Group: Members
Posts: 99
Joined: 7-May 20
Member No.: 27,330



Please can someone tell me what is padding?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 7 2020, 05:02 PM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,881
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>


Attached Image

It's just the styling of the inner yellow box that's interesting. The outer red box is just for show.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 7 2020, 10:29 PM
Post #9


Member
***

Group: Members
Posts: 99
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 8 2020, 02:52 AM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,881
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 8 2020, 07:53 AM
Post #11


Member
***

Group: Members
Posts: 99
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. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 8 2020, 09:46 AM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,881
Joined: 9-August 06
Member No.: 6



Not really. smile.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 8 2020, 10:00 AM
Post #13


Member
***

Group: Members
Posts: 99
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 8 2020, 10:14 AM
Post #14


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,881
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.


Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 8 2020, 10:39 AM
Post #15


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,881
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>


Attached Image

See? Padding creates space inside the box and margin outside. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 8 2020, 11:09 AM
Post #16


Member
***

Group: Members
Posts: 99
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 8 2020, 12:54 PM
Post #17


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,881
Joined: 9-August 06
Member No.: 6



Yes, I think you did. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 8 2020, 01:09 PM
Post #18


Member
***

Group: Members
Posts: 99
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 smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 8 2020, 03:35 PM
Post #19


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,881
Joined: 9-August 06
Member No.: 6



You are welcome. Of course you can ask more questions. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
deb1
post May 8 2020, 11:06 PM
Post #20


Member
***

Group: Members
Posts: 99
Joined: 7-May 20
Member No.: 27,330



What is the difference between java and javascript?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

7 Pages V  1 2 3 > » 
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 6th July 2020 - 01:53 AM