I have made a div that encloses another div inside it. Following is the JSX code for it.
<div className="header-container">
<div className="title">
Make a List
</div>
<div>
Following is the CSS
.header-container{
height: 50px;
width: 100%;
background-color: black;
}
.title{
color: white;
margin: 20px;
}
Following is the result
Why is the black div moving down after applying a margin to the inside div? The margin should be from the parent div but it's not following that?
That's just how margins work - if your child has a margin so large that it reaches outside the parent, it will "push" the parent away from the top.
Give the parent some padding, and then the margin will have something to push against.
Generally if you want to move something away from its siblings, use margin, if you want it to move away from the edges of its parents, use padding.
So, i have simple css but big problem...
.separator a img {
width: 100%;
height: auto;
padding: 12px;
}
And the result is: this
As you can see on the image, shadow is showing on padding of the image but i want it to show on the image.
I want to do this but also to keep the padding.
Any ideas?
You're looking for the margin CSS property. Padding goes on the inside of the border-box, whereas margin goes outside.
Since the shadow is (I'm assuming) applied via box-shadow, the margin will be outside of it and the shadow will display directly adjacent to the image.
Try changing padding: 12px to margin: 12px.
Try using margin instead of padding. Think of padding as being 'inside' the box, and margin as being the space between the box and other things on the page.
Every html element is a box shape element.
Each box is surrounded by boundaries - padding, border, margin.
--
margin gives white space between two elements.
Why would a box require three boundaries? Would margin that creates white space between any two boxes do not suffice?
Not if you also need a border, or some padding.
Though it is true that both margin and padding create space, there is a difference between where they create space. And that difference is the border.
A border, as the word already implies, is to create a visible border. Padding creates space between said border and the content within. But padding can also be used to create some room around an element when it has a background, for example.
To better illustrate the differences, I'll create a couple of snippets:
This snippet has no border, margin or padding, so no spacing.
.row {
background: red;
}
.column {
background: green;
}
.blue {
background: blue;
}
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
This snippet has margins, giving it some space around the element, which is evident because of the background colors.
.row {
background: red;
}
.column {
margin: 10px;
background: green;
}
.blue {
background: blue;
}
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
This example has both a margin and a border, giving you a wider range of coloring options, as well as more space. Yet, you would be unable to give the different spaces a different color with just a margin.
.row {
background: red;
}
.column {
margin: 10px;
border: 5px solid purple;
background: green;
}
.blue {
background: blue;
}
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
This last example has it all. As you can see, the padding creates space within the box, inside of the border. Added to that, you can also see more of the background color of the element.
.row {
background: red;
}
.column {
margin: 10px;
border: 5px solid purple;
padding: 20px;
background: green;
}
.blue {
background: blue;
}
<div class="row">
<div class="column">
Some text
</div>
<div class="column blue">
Some other text
</div>
</div>
Though you could create just as much space between the elements with margin: 35px; you could not get this (* cough *) beautifully colorful display.
You need a border because sometimes people want a visible border between elements, not white space.
You need padding because people want space between the content and the border and between the border and the next element.
Each one of those properties controls a different aspect of the box.
Margin
The margin clears an area around an element (outside the border). The
margin does not have a background color, and is completely
transparent. The top, right, bottom, and left margin can be changed
independently using separate properties. A shorthand margin property
can also be used, to change all margins at once.
Padding
The padding clears an area around the content (inside the border) of
an element. The padding is affected by the background color of the
element. The top, right, bottom, and left padding can be changed
independently using separate properties. A shorthand padding property
can also be used, to change all paddings at once.
Border
The CSS border properties allow you to specify the style, size, and
color of an element's border.
All three properties together give you great flexibility in styling HTML elements. If you only had margin you would only be able to create space between elements. Plus, padding gives you the ability to create "separation" between elements without collapsing margins.
Here's a good reference for more details: When to use margin vs padding in CSS
Elements don't require to have any of the above. What you see is just an illustration about the box-model of the element which just tells you that there is no margin, padding or border.
Important difference between marginand padding is that margin pushes other elements away from the current element, while padding defines the space between the contents of an element and its' outline.
Border is simply a border. It creates a line as a visual separator between elements, and is not really intended to determine spacing between them.
A good explanation is given on the w3schools website.
Margins and padding have two different uses:
Margin collapse on each other while padding doesn't. Two elements side-by-side, each having margin: 10px will be 10px apart. But if they instead had padding: 10px, the would be 20px apart. Edit I misspoke. I was trying to refer to margin-collapsing, which happens on margin-top and margin-bottom at times. More can be read here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing; and additional discussion here: When to use margin vs padding in CSS
When applying a border, padding will be applied inside the border, pushing it away from the element. Margins are applied outside the border.
Styling such as background-color will be applied to padding, but not to margin.
With margins, negative values are allowed. Not so with padding.
From MDN:
Padding
The padding area extends to the border surrounding the padding. When the content area has a background, color, or image set on it, this will extend into the padding, which is why you can think of the padding as extending the content. The padding is located inside the padding edge, and its dimensions are the padding-box width and the padding-box height.
Margin
The margin area extends the border area with an empty area used to separate the element from its neighbors. It is the area inside the margin edge, and its dimensions are the margin-box width and the margin-box height.
I have two containers one on top of each other, the top one has a few paragraphs of text in it.
I need the bottom line of text to be 50px above the bottom container.
So i have either 50px margin bottom to the top container, or 50px top margin to the bottom container.
The problem is that its not 50px exactly from the bottom line of text because of the line height applied to the text.
Is there anyway to make text sit flush at the bottom when it reaches that point?
Hope that makes sense... i appreciate its only minor but some clients want it specific.
You can try setting line-height in the top container the same as its font-size and border at the bottom:
font-size: 14px;
line-height: 14px;
border-bottom: 1px solid #f00;
marign-bottom: 50px;
jsFiddle
try using padding-bottom instead of margin
I would like to make this textbox
As you can see, there are two parts to the div - the background image in the bottom and the border, that I have already done:
HTML:
<div class="person">
<p>Text Text Text</p>
</div>
CSS:
.person {
background: url('../images/results_title.png') repeat-x bottom;
border: 1px solid #000000;
min-height: 32px;
}
The problem is that the border is above the background image. The background in the bottom should be above the border (= in the bottom should be just an image without any borders).
IMPORTANT:
There is a text on the image.
how about adding the border to the <p>? You can have a border-right and border-left on the p, with inside padding to keep the text away from the box. If the <p>'s have other layout that would hinder this, wrap them in a div.
See this fiddle, for example:
http://jsfiddle.net/56TqY/1/
The red and cyan are just to examplify, and obviously I use your background with the text, but I think you get the idea.
I always hate adding more markup, but I think this should be what you're looking for.
I just added a wrapper so that you can add a padding between the border and the background-image