[Solved] Unexpected Result. Margin, Padding related. - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
July 4, 2014 at 4:39 am #174572
ravinder07
Participant
Hi, i am beginner. I have read a lot about CSS and html and now i am doing it practically.

What i was trying that i created a simple html page using three 3 div tag and 3 paragraph . I apply background color to these 3 div tag. As i know div tag are block element so all of those 3 container were have gap between each other. So i thought to remove this gap and wanted to collapse them without using absolute and relative property. I thought it would be simple and could be achieve by putting margin 0 on these 3 div class but it do not work then i accidentally putted padding and its work all the three container collapse. It confuse me badly because what i know is when we apply padding it work under the border, ya i know, it change the dimension of element but it should also displace the lower div element more below and should not collapse with them. Instead i accept this result with the margin property. I have no idea why this margin property fail to collapse these 3 container and why padding collapse it.
```
            <html>
            <head>
                <title> Test </title>

                     <style>
                      div.container {
                             line-height:2em;
                         }            

                      div.pink {
                            background-color:pink;
                            padding: 5px 5px;
                        }     

                  div.blue {
                         background-color:blue;
                          padding: 5px 5px;
                        }

                    div.red{
                            background-color:red;
                            padding: 5px 5px;
                        }

            </style>
            </head>
            <body>

                  <div>
     <div> 
                               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                               ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                               laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                               voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </div>

                         <div>
                               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                               ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                               laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                               voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </div>

                        <div>
                               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
                               ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                               laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                               voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </div>
                    </div>          
            </body>
            </html>
```
July 4, 2014 at 5:03 am #174578

ravinder07
Participant

don’t know why the code massed up….i pasted correct code but it turn &1t;…..
how to fix it so other people can read it correctly

July 4, 2014 at 5:04 am #174579

Paulie_D
Member

Firstly, please don’t post large blocks of code…they are very hard to read in the limited format we have available here. We call them codedumps.

We much prefer that you create an minimal example in Codepen.io where we can see the code and how it actually renders on a page.

http://codepen.io/Paulie-D/pen/eKLEr

As i know div tag are block element so all of those 3 container were have gap between each other.

Actually..no they won’t. Divs have no margin built in as they are automatically 100% wide and have no height of their own. Any height has to be applied as a value to the div or they will gain the height of their content.

When you add padding though…that is extra space inside the div which is reserved before any content (like a p tag – of which more in a minute) is rendered.

So padding of 5px all round will, without any other content automatically make the div 10px tall (5px top and 5px bottom)…so suddenly the div has a height.

Now this can be tweaked so that any padding is not added to the div dimensions if a value is applied but that’s a point for another day.

If you want space between block level elements then you add margin…so adding margin:10px will push the divs 10px away (all round) from the next element (and wrappers etc.)

As usual they are “issues” such as margin collapse but now this post is getting a little long and I still have some way to go.

Oh, yes…paragraphs..well, text in general. In my opinion you should always wrap text in some form of text tag such a p, spanetc. It makes it hard to select that text in CSS without something to grab hold of like the wrapper.

If you don’t the text becomes something called a ‘text node’ which, as I said is hard to grab with CSS.

July 4, 2014 at 5:26 am #174581

ravinder07
Participant

Divs have no margin built in as they are automatically 100% wide and have no height of their own.

Thanks i accomplish my desire effect by putting margin negative….I did not know that div have no default margin.

I will use codepen next time.

I am like watching hours of video reading article randomly and learning CSS and HTML…… Just wondering if i can get all the important points on a single place?
How did you master in CSS and HTML?

July 4, 2014 at 5:38 am #174582

Paulie_D
Member

Thanks i accomplish my desire effect by putting margin negative

That does not sound like an optimal solution. I suspect there may be something we’re missing here.

How did you master in CSS and HTML?

Years of self-development in my case. I;ve been interested in computers since they were room-sized. It’s not my career just a strong interest.

I try things out, ask questions, get feedback, participate in forums such as this and Stack Overflow.

Learn by doing is one of the best ways there is…because you learn from thinsg that go wrong too.

Just wondering if i can get all the important points on a single place?

Alas no…there are places where you can find a bunch of stuff all in one place like this one

https://developer.mozilla.org/en-US/

…but they are like technical manuals…not for beginners.

There are places like – http://www.w3schools.com/

BUT you will hear a lot of criticism about them (and that one particularly) as the information can be out of date and thus misleading.

Google can sometimes be your friend…a properly worded search can yield amazing results and if you participate in forums such as these (or just lurk) you can find useful links being posted all the time.

Like –

http://learnlayout.com/
http://www.sitepoint.com/
http://www.smashingmagazine.com/

and many others.

July 4, 2014 at 6:07 am #174585

ravinder07
Participant

That does not sound like an optimal solution. I suspect there may be something we’re missing here.

I was just testing things…since i have read that how margin work and how we can move element by using margin…so when i failed to collapse div’s by putting margin 0 … i got mad and puzzled that why those container not collapsing ….. i assume that by removing default margin between the div…would collapse them since there were already no margin of div’s so that they did not work ….. now i know why they did not work :)

Well i also started doing things. hope to get good grasp in upcoming months.
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘CSS’ is closed to new topics and replies.