Everytime I try to add padding around the outside of an input, it just adds padding between the placeholder and the inside of the input. Does anyone know how to fix this?
#ask {
padding: 10px 10px 10px 6px;
font-size:45px;
background-color:#F2F2F2;
}
<input id="ask" type="text" placeholder = "Ex: How tall is the Gateway Arch" autocomplete="on"/>
Padding it's the space between the element and it's content. Maybe you should try margin.
#ask {
margin: 10px 10px 10px 6px;
font-size:45px;
background-color:#F2F2F2;
}
Why don't you use margins?
In your case something like that:
margin: 10px 10px 10px 6px;
Padding always clears area around the content of an element.
http://www.w3schools.com/css/css_padding.asp
While margin is used to clear area around an element.
http://www.w3schools.com/css/css_margin.asp
Try adding a margin instead of padding.
https://jsfiddle.net/Lw4d1ghs/
Margins change the space outside an element, padding change the space within it.
These rules are governed by the CSS Box Model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Related
I have a div tag in which i have other controls. I have given a border to the div through css. I want the div tag to wrap itself around the controls and auto adjust its own size.
.divwrap
{
width: 60%;
height: 60%;
border: 1px solid #66CCFF;
vertical-align:middle;
margin-left:150px;
margin-right:300px;
}
Now in the above code I have fixed margins. So if I were to use the same style for a div tag on another page, it would be problem because the controls (inside the div) on another page may be more or less in no. I want the div tag to be like a rubber band that can auto adjust the size when wrapped around something (in this case, an html table with controls).
is this achievable? if yes, how??
if you want to make a wrapper keep these things in mind
try not to give it a static dimension.
don't give any width and height, as it is going to be a little larger than the content over which it is applied
give percentage value margin and padding:
try this:
.divwrap
{
padding:3%;
display:inline-block;
margin:3%;
border: 1px solid #66CCFF;
vertical-align:middle;
width:auto;
position:relative;
box-shadow: 10px 10px 5px #888888;
}
see this fiddle.
so now, no matter what the width and height of the child div is, this div will always wrap around it.
As I'm developing my webpage, I found an issue using the box-shadow feature.
I want to add a box-shadow to the whole wrapper of my webpage, which contains the header, nav, content and footer.
The nav and content are side by side element.
The problem is, that when I add the box-shadow to the #wrapper, it only appears on the header, as I reproduced here
I was able to fix it by using the side by side elements with the display: table-cell propriety, but it ruined the rest of the page, so I'm asking how could I fix this.
Add overflow:hidden to your wrapper as shown here. It will force your container to wrap the floated elements.
[edit] Without having to add extra markup...
Use CSS clear:both; because you are floating elements to the left, check this out : my fiddle
instead of a wrapper you could simply make another separate with the same size and position and give it a box shadow. change the height to whatever you want, just figure out the height of the content you want to be shadowed.
<style>
div.shadow {
width: 400px;
height: 100%;
position:absolute;
z-index:-99;
box-shadow: 3px 3px 20px #999;
-moz-box-shadow: 3px 3px 20px #999;
-webkit-box-shadow: 3px 3px 20px #999;
}
</style>
<body>
<div class="shadow></div>
<!-- everything else here-->
I am trying to make a HTML page using two column layout.
I have a version in jsfiddle
http://jsfiddle.net/bobbyfrancisjoseph/eFMpJ/35/
I am unable to set a top margin for the the inner container.Though I have given a top-margin for the innerContainer its not been reflected in the page.
The reason I am using an inner container for containing the left-sidebar and innerContainer is that in the actual page I have two more divs side by side in the inner-container.I do not prefer to use three column layout for that reason.
Your issue is with margin collapsing. You can prevent the margins from collapsing by using a border or padding. There's a good explanation here: http://reference.sitepoint.com/css/collapsingmargins
http://jsfiddle.net/eFMpJ/46/
#outerContainer
{
background-color:#FFF000;
margin:10px 10px 10px 10px;
border-top: 1px solid black;
// or padding-top: 1px;
}
First of all the closing div is missing for the opening .
Then I added padding-top of 10px in outerContainer.
#outerContainer
{
background-color:#FFF000;
margin:10px 10px 10px 10px;
padding-top: 10px;
}
I think this will solve your problem.
Please let me know what is the result.
Of course, width: 100% on a block element fills the container, but only if border, padding, and margin are zero. Putting such an input in a containing div with padding does the trick, but I'm curious why simply input {display: block; width: auto;} doesn't work. Suggestions?
I agree with centr0 as to why width: auto doesn't work.
If you actually want to get an input to be full width of its container, then the following works. Given:
<div id="Container">
<form>
<input type="text" />
</form>
</div>
Do this with the css:
form {
padding: 0 0 0 14px;
}
input {
padding: 5px;
width: 100%;
margin: 0 0 0 -14px;
}
Explanation: Obviously, the -14px margin on the input counteracts the padding added to the form element. What is not so obvious is where the 14px came from. It is equal to the left/right 5px padding of the input plus the default for input element's border width (2px on all the browsers I tested). So 2 + 5 + 5 + 2 = 14.
To really be sure you are consistent cross-browser, you would want to explicitly set the border width to what you desired for the input. If you want a different padding (or thicker/thinner borders), then just redo the math. A 3px padding would be 10px instead of 14px, a 7px padding would be 18px instead of 14px.
For the example, you can set the width of #Container (could also be the body itself that is just defaulting to 100% of the page width) to what you desire, and the above css should match its width.
if i remember correctly the default size of input doesn't span the width of its container. "width: auto;" is like "resetting" the style back to its default value.
If you aren't using a Reset CSS Stylesheet then the input element will have some default styling set by the browser, this probably includes padding and margins.
also, width:auto will give the browser default. Try width:100%
Reset the container's padding resolves the problem.
td {
padding: 0 1em;
}
When using margin on the child element (h2) why does it give margin to the parent(#box) instead? If I change margin to padding it works as expected.
Did something change or am I missing something? here is my sample code
<html>
<head>
<style>
#box{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
height:200px;
width:500px;
background:red;
box-shadow: 15px 15px 12px grey;
-moz-box-shadow: 15px 15px 12px grey;
-webkit-box-shadow: 15px 15px 12px grey;
text-align:center;
margin-top:0;
}
#box h2{
color:#fff;
text-shadow: 2px 2px 2px #000;
margin-top:75px;/*making this padding gives the effect I thought I could achieve with margin*/
height:50px;
width:200px;
}
</style>
</head>
<body>
<div id="box">
<h2>Fun with CSS3</h2>
</div>
</body>
</html>
also if anyone or everyone could share their experience with margin quirks. THx
It's because of collapsing margins. I hate this "feature", but that's the cause of the rendering "issues" you're having. An excerpt from the specs (emphasis is mine):
If the top and bottom margins of a box are adjoining, then it is possible
for margins to collapse through it. In
this case, the position of the element
depends on its relationship with the
other elements whose margins are being
collapsed.
If the element's margins are collapsed with its parent's top
margin, the top border edge of the box
is defined to be the same as the
parent's.
Here's a couple of articles on this subject:
http://reference.sitepoint.com/css/collapsingmargins
http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php
My guess is that you've misunderstood the box model. Margin is the space outside, i.e. around a widget, while padding is space inside, i.e. betweeen the widget's outer border and its content.
You may want to look at this diagram: http://www.w3.org/TR/CSS2/box.html of the box model for reference.
I think it's working OK. Padding does just that: it pads the element its applied to. Margin separates elements from each other. So the margin is working as it should. The position of the h2 tag is where it should be. Giving it a margin would push it away from the root element, which in this case is the body. In order for it to move around in the parent element (the #box div), either you would have to position it relative to the #box element, or give it padding (just one method, but not optimal).