What order would this go in?
div{
margin:0px 0px 13px 0px;
}
What side of the div would the 13px effect?
Also would I need all of the px or just one or none?
could I do this?
div{
margin:0 0 13 0;
}
It goes in this order: top, right, bottom and left. For example:
div {
margin: 1px 2px 3px 4px;
}
is equal to
div {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}
You also can specify only 2 properties, and for example:
div {
margin: 10px 20px;
}
means the following: margin-top and margin-bottom are equal to 10px, margin-left and margin-right are equal to 20px.
You can also specify 3 values, like this:
div {
margin: 1px 2px 3px;
}
And it equals to:
div {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 2px;
}
And as you already know margin: 1px will set all 4 margins to 1px.
When you specifuing a number not equal to 0, you should specify px or % and so on, but when you specify 0, it can be just 0, it's OK.
Related
I have the following code:
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 20px;
height: 30px;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
The problem is that the <div class="perc"> can go up to width:95%;. How would I go about calculating pixels so that I can use JS 1%-100%. To clarify: I'm adding width with JS, so that's not an issue.
Why this happens
This issue is happening because you are setting the width to 100%, but the inner box also has a padding of 10px (in left and right) and a border of 2px. That makes it have an actual width of 100% of its parent width + 20px (10px margin on both sides) + 4px (2px border on both sides).
How to fix it
You could fix it in different ways. The easiest one would be to use box-sizing with a value of border-box:
The width and height properties include the padding and border, but not the margin.
The code would look like this (note how the height changes too):
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 35px;
width:100%;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
box-sizing:border-box;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
I'm pretty sure this is fairly easy, but i'm stumped.
I am working on a responsive layout design. Regardless of the size of the page, I always want there to be a 10px margin on the left and a 10px margin on the right. I am able to achieve the 10px margin on the left, but I can't figure out the right margin. How would I do this with css? I can estimate the % width based how much space I want on the right, but obviously as the page size scales so does this margin. How do I always keep margin-right? Here is an example of my code:
form {
width: 100%;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
'form' sits inside '#wrap' and '.left' all of which have the same margin-right applied:
#wrap {
width: 95%;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: auto;
-moz-box-shadow: 0 0 3px 3px #CCC;
-webkit-box-shadow: 0 0 3px 3px#CCC;
box-shadow: 0 0 3px 3px #CCC;
background-color: #fff;
display: inline-block;
text-align: center;
}
.left {
float: left;
text-align: left;
padding-right: 10px;
padding-left: 18px;
font-weight: lighter;
font-size: 12px;
color: #777777;
padding-top: 10px;
width: 100%;
margin-right: 10px;
}
This will do the magic:
form {
width: auto;
display: block;
margin-left: 10px;
margin-right: 10px;
}
The problem is that the form ends up being 100% the width of its parent container plus the 20px for the two margins.
It would be easier to set the form inside a parent element and put padding on that. e.g.
body{
padding:0px 10px;
}
form {
width: 100%;
display: inline-block;
}
I am trying to make an expandable div that will have a minimum width of 200 px but will expand if the content is longer. the problem is the width always displays as 100%, If i put a width: 200px it will stay 200 and will not expand.
This is my CSS code for the div:
#section_title {
background-color: #2b65ae;
border-radius: 10px;
color: #ffffff;
padding: 5px 30px 0px;
background-size: 100% 100%;
font-size: 24px;
min-width: 200px;
height: 30px;
text-align: center;
font-style: italic;
margin: 0 auto;
text-transform: uppercase;
-moz-box-shadow: inset 0 0 8px #444444;
-webkit-box-shadow: inset 0 0 8px #444444;
box-shadow: inset 0 0 8px #444444;
}
You may use display:table properties to achieve this :
Update your CSS with :
display:table;
width: 200px;
DEMO , using just words and white-space to keep all on one line for the demo purpose.
You can use this
div {
float: left; /* or right according to your requirement */
width: auto;
min-width: 200px;
max-width: 100%;
}
This will keep the minimun width 200, will expand on more content and won't go beyond 100% width.
Try like this:
#section_title {
display:inline-block;
width: auto;
min-width: 200px;
max-width:100%;
}
Updated fiddle
If it's just for one line of content, then you can add a float to your css.
#section_title {
min-width: 200px;
height: 60px;
background-color: rgb(14,87,145);
float: left;
}
Example fiddle here.
Given the following CSS
.comment {
margin: 10px;
display: block;
overflow: auto;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
-webkit-box-shadow: rgba(0, 0, 0, .2) 1px 1px 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
min-height: 200px;
width: 100%
}
This is applied to a textarea but the right margin is ignored and the textarea goes off the screen.
why is this?
By setting the width to 100% and a margin of 10px the textarea will be a 100% width of it's container shifted down and to the left 10px
To get your desired result you'll probably need to use a container around the textarea with a 10px padding.
See example.
commentA is using a container with padding
commentB is your original CSS
so something like:
<div class="comment-container">
<textarea class="commentA"></textarea>
</div>
and
.comment-container {
padding:10px;
}
.commentA {
width:100%;
min-height: 200px;
}
to get started.
Just use:
display: inline
Instead of:
display: block
see jsFiddle example here
I'm applying padding-top to an li to try to align the text nearer to the bottom. But it's just making the li bigger, even though there seems plenty of room to fit the text.
Any ideas?
<ul>
<li class="padded">x</li>
<li>x</li>
</ul>
li {
width: 25px;
height: 25px;
border: solid 1px black;
display: inline;
margin: 0 2px 0 0;
float: left;
}
.padded {
padding: 3px 0 0 0;
text-align: center;
}
I get the same results in IE7 and Chrome, not checked any other browser.
The li.padding is growing larger because you have a height of 25px plus a padding-top of 3px.
The you should decrease the height of the li.padding if you want to increase the top-padding, yet have it remain the same height as the plain list item. So to have a 25px high block with 3px padding-top, you should set the height to 22px with a padding of 3px.
li {
width: 25px;
height: 25px;
border: solid 1px black;
display: inline;
margin: 0 2px 0 0;
float: left;
}
.padded {
padding-top: 3px;
height:22px /* original height (25px) minus padding-top (3px) */
text-align: center;
}