When do you use <p>? I know it could be used for text, but do you need to write it if you have already -for example- <article>? or can I just use <article> alone then?
Also why do you need to use margin instead of padding on <p>? I tried already with padding, but that doesn't work. If I tried it with margin it works well.
The HTML <p> tag is used for defining a paragraph. For example the two sections of your question are paragraphs
Also to add a margin is the space outside something, whereas padding is the space inside something.
For example:
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 10px;
padding: 20px;
}
This leaves a 10-pixel width space around the secondary header and the header itself is fat from the 20-pixel width padding.
Use margin to separate the content from things outside it.
Use padding to move the content away from the edges of the block.
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
I have very simple code for beginning:
<!doctype html>
<head>
</head>
<body>
<style>
.master {
background: green;
}
.master div {
background: red;
}
</style>
<div class="master">
<div>
abc
</div>
</div>
</body>
</html>
I put it also on JsFiddle. Only inner (red) div is visible because there is no margin or padding set so inner div takes the whole space of .master div. That's clear.
I would like to set for .master div margins to 20px so I could do it this way:
.master div {
background: red;
margin: 20px;
}
But I would expect that I have both div visible (red and green) but in fact only red color is visible and green is visible only on left and right - JsFiddle.
I know how to solve it (in this case I can set padding for .master div to 20px I could do something like this:
.master {
padding: 1px 0;
}
and I'll have the same effect (or almost the same effect - 1px difference) as you see at JsFiddle or I could set padding for .master div instead of using margin for inner div
Questions:
Why simple adding margin for inner div doesn't make that margin is set as expected (both green and red visible) and why adding even small padding fix it?
Why behaviour for it is different for top and bottom margin and for left and right margin ?
Is this issue has any name?
Are there any other common cross-browser solutions?
If it is explained in external source you can also add link to external resource.
I'm a bit ashamed that I ask about such simple thing, but I always solve this using simple padding (as showed in the question) and it worked.
This effect is due to the "Collapsing Margins" specification. Here's the explanation from the W3C:
“In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.”
Margin collapse only occurs with vertical margins on adjacent or nested elements.
Answers to your questions:
Adding margins to the inner div causes a margin collapse with the margins of the outer div. They are combined into one margin. Setting a padding on the outer div gives it a block formatting context and separates the elements, therefore un-collapsing the margins.
Margin collapse only occurs on vertical margins.
The effect is called "collapsing margins".
The only cross-browser "solution" is to give the parent element a block formatting context by adding padding or overflow: auto/hidden.
See this article on SitePoint for more information
I have this HTML
<span class="captionsection">Notes: <span class="grey">Lot behind chain-link fence was trimmed and well-maintained.</span></span>
And this css
.captionsection {
padding-top: 5px;
padding-left: 5px;
}
I thought that the inner span would inherit the padding of the outer span .captionsection? But this is not the case. CSS padding keeps inheriting
How can I fix this?
Child elements do not inherit padding from parent elements.
This doesn't work as expected because <span> is an inline element. Padding is not applied "in the middle" of its content, which includes the position the text wraps around.
If you wanted to keep the left padding for the whole height of the content in your example, you should have used a block element such as <div> for .captionsection.
Example fiddle
I should also mention that padding is not inherited (with the CSS meaning of the word "inherited") by child elements as you say -- but even if it were, you still would not have gotten the expected left padding after the wrap because of the above.
First of all, paddings are not inherited. But this is not the thing you mean, I believe, but that the second line is not indented.
A <span> is, by default, inline. This means it will be first layout as one line and then, if necessary, split to lines.
Here, the padding is only added to the first line because of this.
To make it work, you'll have to make the outer span a block or inline-block with the display property.
Use display: block; Otherwise, span won't inherit the padding.
CSS:
.captionsection {
padding-top: 5px;
padding-left: 5px;
display: block;
}
Fiddle:
http://jsfiddle.net/JmV85/
When I apply a margin to an element rather than extending its containing element it creates margin outside of it. So with the code below there is a space between the divs's coloured background.
Why does this happen? It would seem more logical to me for the containing div to be expanded (so im the code example there would be no white space and the coloured 'bars' would be fatter).
Is there a way with CSS I can stop it happening?
http://codepen.io/anon/pen/KrJgm
<div class="one">
<p>Text</p>
</div>
<div class="two">
<p>Text</p>
</div>
<div class="three">
<p>Text</p>
</div>
.one {
background: red;
}
.two {
background: green;
}
.three {
background: gold;
}
UPDATE Sorry I dont think I was clear. I understand that the margin on the paragraph tag is causing the white space but what I dont understand is why the margin isnt 'pushing back' the containing div (so it would look the same as if a padding had been applied to the containing div).
As you updated your question, I think whats troubling you is Collapsing Margins
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
Solution? Use overflow: auto; on the parent element.
Demo
If you are speaking about the white space in the demo as I am not seeing any margins used in your code.. Than below is the answer..
You are not resetting browser default styles..
Demo
* {
margin: 0;
padding: 0;
outline: 0; /* Optional */
}
Here I am using * selector which selects all the elements, and am using margin: 0; and padding: 0; to reset the browser defaults..
Some do not use * selector as they find it bad from a performance point of view, so if that's the case you can use CSS Stylesheet Reset
If you are using margins in your code than please refer this answer...
If you are aware of the CSS Box Model, border, padding and margin are counted outside of the element and not inside.
So in this case you might like to have padding and not margin.
Though, you can alter the behavior of CSS Box Model by using box-sizing property set to border-box or padding-box which will count the border and padding inside of the element rather counting outside of it..
The paragraph tag has margin on it by default. So if you want to get rid of the margin you need to set it to 0 and to expand the paragraph container you need add padding (pads inside of the container), margin is used for outside of the container
p {
margin: 0;
padding: 10px 0
}
http://codepen.io/anon/pen/Bqgyd
I have the following span
<SPAN style="border:solid;TEXT-ALIGN: right; FONT-STYLE: normal;width:100px; padding-RIGHT: 50px; DISPLAY: inline-block;PADDING-TOP: 3px">hello world</SPAN>
It seems to me the total width of the span is increasing base on the padding size. Is there a way to prevent the span size from increasing and pad the text to the right?
Don't know if your padding-right actually works with a space there, but it shouldn't be there. Could be another problem as well. you have
padding- right:50px
instead of
padding-right:50px;
Edit: to increase space outside of your span rather than increasing the span itself replace:
padding-right:50px;
with
margin-right:50px;
Here is an example. fiddle with it if you don't quite understand. http://jsfiddle.net/robx/GaMpq/
Use margin instead of padding. Padding is space applied inside the element, margin is space applied outside the element.
With either margin or padding, you're still messing with the box model and altering the actual size of the span. This means that the line wraps will not occur in the proper place, and it can disrupt justified margins.
You can use the after selector to add a bit of content and style it:
your_css_class:after { content:" "; word-spacing:1em; }
I don't think that can be done as inline styling, it has to be done in a <style> block or an external file.
The easiest way to do it:
span {
width: 80%;//Or some different value
}
I have a few divs which makes a little bit too spacey between the footer and the body. So i want to convert one div to a span. But when I do that, it messes the footer's content a bit up.
How can i do this and keep the styles that already have been defined for the footer?
Thanks in advance!
Edit
div.footer {
width: 986px;
margin: 0 auto;
padding-bottom:18px;
border: 0;
text-align: left;
color:#000000;
}
As you already know, the difference between a <div> and a <span> is just that one defaults to display:block; and the other to display:inline;. To make one act as the other, just set the display style to the other type.
However, you already said you tried this and it didn't achieve the effect you were looking for. There is another display property, which is less well known, but provides a half-way house between the two:
display:inline-block;
What it does is display it inline, but still with block-like properties. (This is basically how an <img> tag works by default).
Could this be the answer you're looking for?
To convert a div to a span, simply add:
.myDiv
{
display: inline;
}
But I'm really not sure that this is the solution you're after.
Quote:
there are 2 divs next to eachother which creates a hugh gap between the body and the footerbody and the footer
Solutions:
Remove empty div(s) from HTML
Remove empty div(s) by adding display:none
Reduce height of the div(s)
Reduce margin or padding of the div(s)
Set position:relative; top:-[yourownnumber]px to .footer
Try adding overflow:auto; to your span. Also add display:block;
If there is too much space between the footer and the body, have you looked at what the margins and paddings are on the affected divs? Does something have a height or a min-height that is making some of the content within the body taller than the natural end of the content? Firebug is a great tool for this.
Div is a block element. Other block elements are paragraphs, headings, lists, etc. Span is an inline element. Other inline elements are strong, image, anchor, etc.
You still need the body to be contained in a block-level element.
How if add this:
position:relative /*optional*/
float:left;
left:0px;
I always do this before i know to use span when I first learn css I always do to my element content.