2

I have this div with class "circle-text" which contains a "p" element containing a small text.

The p element has top and bottom margins. Now this margins seems to be moved above the upper div instead of being between the div and the p, which I dont want.

CSS:

.circle-text {
    /*float: right;*/ /* Uncomment it*/
    width:20%;
    border-radius: 50%;
    background-color: green;
}
.circle-text p {
    width:100%;
    padding-top:50%;
    padding-bottom:50%;
    line-height:1em;
    margin:2em 0;
    text-align:center;
}

Here's the example: http://jsfiddle.net/bendtherules/3eebw/6/

Now if I add float: right; to the upper div, it actually includes the margin now (which is exactly what I want). How does that work? Also how can I mitigate this issue?

bendtherules
  • 333
  • 4
  • 12

4 Answers4

1

If I understand your question right, the reason this is happening is because you have added both padding and margin. Margin goes outside of the padding. If you press Ctrl + Shift + C while in Chrome, hover over the p and select it so that you can inspect element. You will notice that the margin of the p is outside of the padding that is already there.

Once you have the developer tools opened, go to the right panel and scroll down until you get to the section where you can see how many pixels or margin and padding there is. It is an interactive picture that you can't miss.

Casey
  • 1,562
  • 2
  • 20
  • 32
  • Yes, i have seen it. I cant understand why this is happening. Can you please explain? Margin of the inner element is supposed to be between the inner element and the outer element, right? – bendtherules Dec 18 '13 at 17:24
  • The reason this is happening is because padding has to do with the space above and below the content *within* the element whereas the margin has to do with the space *outside* of the element. So the margin is outside of the padding. Does that help? – Casey Dec 18 '13 at 21:08
  • Here a couple good links: http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css, http://www.htmldog.com/guides/css/beginner/margins/ – Casey Dec 18 '13 at 21:13
  • ^ Yes, I get the part where the padding of the inner element is outside it. But should it be outside the outer element also or inside the outer element? – bendtherules Dec 19 '13 at 08:47
1

DEMO: http://jsbin.com/uBANucu/1/

Another option which may be more flexible: http://codeitdown.com/css-circles/

The p will always affect the height and so the result is an oval, not really a circle. There's a number of ways to do this, here's one:

<div class="circle-container">
   <div class="circle-text">
    <p>I am circle</p>
   </div>
</div>

CSS

.circle-container {width:20%;}

.circle-text {
   border-radius: 50%;
   background-color: green;
   padding-top:50%;
   padding-bottom:50%;
   position:relative;
}

.circle-text p {
  position:absolute;
  top:50%;
  width:100%;
  line-height:0;
  margin:0;
  padding:0;
  text-align:center;
  color:#fff;
  font-size:15px;
}
Community
  • 1
  • 1
Christina
  • 32,538
  • 17
  • 76
  • 118
  • If you want an actual circle, this is an option. If you just want an oval-ish thing, you would remove margin, line height, and add the padding to the p. – Christina Dec 18 '13 at 17:30
  • Thanks, i was actually wanting this. Infact, i saw that link at first, but wanted to do it without the :after. Why is this less flexible, because it can accept only one line? – bendtherules Dec 18 '13 at 18:02
  • One line only for this. – Christina Dec 18 '13 at 18:39
0

If setting line-height: 0 is suitable for your design, change that and remove the margin altogether.

Example: http://jsfiddle.net/3eebw/12/

An understanding of the CSS box model may help you. See this diagram: http://www.w3.org/TR/CSS21/box.html

Josh Harrison
  • 5,662
  • 1
  • 24
  • 43
0

From what I can see what you mean is that you want to increase the space between the top and bottom edges of the circle from the p tag. The padding is the right way to go and not the margin.

user3116210
  • 1