HTML:
<p>
<input type="radio" id="SQL:79" name="SQL" value="79" maxlength="300">
<label for="SQL:79">Microsoft SQL Server 2012 Express - 64 bit</label>
</p>
relevant CSS:
p {
line-height:23px;
vertical-align:top;
margin:0 0 8px 0;
padding:0;
clear:both
}
input {
margin:0 5px 0 0;
padding:0;
height:23px;
}
input[type="radio"] {
border:none;
background:none;
vertical-align:text-bottom
}
label {
vertical-align:top
}
My input and label are exact 23px high, however the <p> is 28px :(
When I remove vertical-align from the input, the <p> reduces to 25px; but still not the desired 23px!
I have changed the vertical-align on the input[type=radio] from text-bottom to plain bottom/top; this makes the parent p exactly 23px :)
PS: this line of code comes from the HTML5 boilerplate reset, so be aware!
Drop the line-height of p to 19px or add a margin-bottom: -2px to the input.
http://jsfiddle.net/EWfyM/
p {
line-height:23px;
vertical-align:top;
margin:0 0 8px 0;
padding:0;
clear:both
}
input {
margin:0 5px 0 0;
padding:0;
height:23px;
margin-bottom: -2px;
}
input[type="radio"] {
border: none;
background:none;
vertical-align:text-bottom
}
label {
vertical-align:top
}
I know this does not answer your question of "Why?", but using firebug I was able to get your paragraph height to display as 23px by changing the height of your radio button.
This is the CSS I changed:
input[type="radio"], input[type="checkbox"] {
box-shadow: 0 0 0;
height: 18px;
margin: 0 5px 0 0 !important;
padding: 0 !important;
}
Notice I changed your height: 23px; to height: 18px. I could not find an answer online, but perhaps the radio button itself has some default height.
Using display inline works:
(I've used inline css here)
<p style="display:inline;margin:0 0 0px 0;padding:0;clear:both;">
<input type="radio" value="79" id="SQL:79" name="SQL" maxlength="300" style="display:inline;margin:0 0px 0 0; padding:0; height:19px;border:none; background:none;vertical-align:middle;position:relative;top:-2px;">
<label for="SQL:79" style="display:inline;">Microsoft SQL Server 2012 Express - 64 bit</label>
</p>
Hope that helps.
The p tag will get expanded as per the content size.
We have to specify the height for the p tag if we need.
Here is modifed css (simplify :)):
p {
line-height:23px;
vertical-align:top;
margin:0 0 8px 0;
padding:0;
clear:both
}
input {
margin:0;
padding:0;
}
input[type="radio"] {
border: none;
background:none;
}
label {
vertical-align:baseline;
}
Setting the height of input[type=radio] cannot enlarge its visual
shape. So I delete the height.
When the display of child element (input) is inline or inline-block,
setting the line-height of parent element can align the child
element center vertically. But you can also align the child element
top or bottom vertically with vertical-align.
I have changed the vertical-align on the input[type=radio] from text-bottom to plain bottom/top
Related
I'm trying to make a simple 3-cell div that will show a list of ratings for cigars. I want the left cell to be a square image of the cigar, the middle to be the name, and the right to be the rating. The code works fine until I add the image - it then seems to add an 8px border on the bottom of the image, revealing the cell's background color. Using Wordpress (if that helps). Any help is appreciated!
This is the page: http://cigardojo.com/best-cigars/
HTML
<div class="ratingWrapTopRated">
<div class="cigarImage"><img src="http://cigardojo.com/wp-content/uploads/2014/08/cigar-test.jpg" alt="test" width="90" height="90" class="alignnone size-full wp-image-14045" /></div>
<div class="cigarName">Opus XXX Power Ranger</div>
<div class="numericalScoreTopCigars"></div>
</div>
CSS
.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0 auto;
display:table;
font-family:Helvetica, Arial, sans-serif;
margin-bottom: 10px;
}
.cigarImage {
background:#fff; color:#fff;
display:table-cell;
width: 90px;
}
.cigarName {
background:#ff5100; color:#fff; text-align:center;
display:table-cell;
vertical-align:middle;
text-transform: uppercase;
}
.numericalScoreTopCigars {
background:#000; color:#fff; text-align:center;
width:25%;
display:table-cell;
vertical-align:middle;
font-weight:bold;
border-left: 4px solid; border-color: #fff;
}
Add line-height: 0; to .cigarImage and you will get rid of it. Many people will tell you to use display: block; and that will work but that is not the real problem. The problem is that img tags are inline and you get that space because you get the image plus the line-height it is in that container, and that creates the space you see below your image. The correct solution to that is to add what I just told you.
So edit your class like this:
.cigarImage {
background:#fff; color:#fff;
display:table-cell;
line-height: 0; /* Here is the solution */
width: 90px;
}
And you will get that working right :)
This is because images are inline (that is, they're treated like they're on a line of text) by default, and the bottom of them is aligned to the "baseline" of the line of text, not the absolute bottom. Below the image you get the space from the rest of the line below the baseline. If you just set the image to display: block; it should get rid of it (then it won't be considered part of a line of text, and will instead be its own block).
Just add a padding right of 5px or so on the .cigarImage class. You should also increase your image height or decrees the height of the info bar next to your images as they dont line up.
In your class ratingWrapTopRated class set line-height to 0:
.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0;
display:table;
font-family:Helvetica, Arial, sans-serif;
padding-bottom: -8px;
margin-bottom: 10px;
line-height: 0; /*here*/
}
I'm trying to setup a clean CSS to style a button to visually looks merged with the near input field.
I'm using this CSS currently:
button {
position: relative;
left: -4px;
box-sizing: border-box;
padding: 0 10px;
margin: 0;
font-size: 17px;
border: 1px solid gray;
border-radius: 0 3px 3px 0;
}
http://jsfiddle.net/GRwqL/
The main problem is the usage of the left property, I don't think it's a good practice, mostly because it's not handled correctly on all browsers.
The other problem is that this code in Internet Explorer and Firefox makes the button not high as the input field.
So I was looking for some help to write a better code cross-browser and cleaner.
Personally I don't care if is needed a wrapper element or any other HTML element, I just need a clean code, cross browser and that works well.
<span class="inputWithButton">
<input type="text"><button>Submit</button>
</span>
input, button{outline: none;}
.inputWithButton{
display:inline-block;
overflow:hidden;
border:1px solid gray;
border-radius: 3px;
}
.inputWithButton > *{
vertical-align:top;
border:0;
margin:0;
padding: 3px 10px;
}
.inputWithButton > input[type=text]{
width:150px;
}
.inputWithButton > button{
border-left:1px solid gray;
background:#eee;
cursor:pointer;
width:70px;
}
.inputWithButton > button::-moz-focus-inner {
border: 0;
}
DEMO with higher paddings and different borders colors : http://jsbin.com/OPiroyib/4/edit
(Just remove border from the span and add border to both input and button) That easy.
You need to override the default margin on the input element too.
jsFiddle example
input, button {
margin:0;
}
In doing so, there will no longer be space between the elements, assuming there is also no space between them in the markup. Note, that inline elements respect the whitespace in the markup.
For instance, even after resetting the default margin there is space between the elements, if there is space between them in the markup (example)
For your second problem (making the elements the same height), do the following:
input, button {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding:0;
margin:0;
vertical-align:top;
line-height:30px;
height:30px;
}
Basically, use box-sizing to change the box model, again reset the margin/padding, use vertical-align:top for alignment issues, and then set an equal line-height/height on both elements.
jsFiddle example
Take a look at css-reset or normalize.css to set the defaults in all browsers to "null".
Also css frameworks like bootstrap are very cool!
Have you thought about using a simple span tag instead of a button and then attach an onclick event to it?
The following seems to work ok for me - though you might need to use a reset / modenizer style sheet to make it more predictable on different browsers.
http://jsfiddle.net/GRwqL/13/
<input class="nospace"></input><span class="nospace">Submit</span>
.nospace {
margin: 0;
padding: 0;
}
span.nospace {
height: 1em;
margin: 0;
padding: 1px;
border: 1px solid black;
}
<div id="divL">
<input name="email" type="text" placeholder="input text">
<div class="divInput">divInput</div>
<div class="divtxt">divtxt</div>
<input name="sname" type="text" placeholder="input text">
<select name="srodstvo">
<option value="1">select</option>
<option value="2">323</option>
</select>
<div class="divtxt">divtxt</div>
</div>
CSS
*{
margin:0;
padding:0;
}
#divL{
width:45%;
margin:5vh 0 0 5vw;
border:thin solid blue;
}
input[type="text"], .divtxt, .divInput, select{
width:100%;
margin:4px 0;
padding:4px;
border:thin solid #999;
border-radius:3px;
}
All elements have the same margins, padding and width. But the distance between second end the third element is different and select is shorter !?
fiddle is here
To fix the width, add this CSS rule:
input, select
{
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
To fix the margins: add display: inline-block to...
input[type="text"], .divtxt, .divInput, select
{
width:100%;
margin:4px 0;
padding:4px;
border:thin solid #999;
border-radius:3px;
display: inline-block;
}
Here's it working: http://jsfiddle.net/leniel/Y5aVB/4/embedded/result/
Try adding a second value to padding
padding:4px 0;
Fiddle
Tested in Firefox 23
UPDATE:
To fix the margin between elements 2 and 3, set all 4 sides in padding
margin:4px 0 0 0;
To keep the spacing at the bottom, set a padding in the outer div
padding:0 0 4px 0;
Updated fiddle
It is due to Box-Sizing.
Input has box-sizing is content-box whereas select is by default has border-box as box-sizing. So you can change the box-sizing property for the select by adding this to your markup
select
{
box-sizing:content-box;
}
Without setting this property select has less height than the other elements (In Chrome).
One more thing is after setting this your elements are still outside the parent container. It is because you have put their width=100% along with padding : 4px which make them bigger than 100% of parent. So just set 0 padding from left and right.
Padding:4px 0;
And for the uneven margin in third element add
display:inline-block;
Update Js Fiddle
I have a form on my page and i'm trying to give more space between the text boxes.
I tried 'Padding' in all kind of ways but they seem to be grouped together, and whatever i try affect all 4 of them.
The page
If i'm not misstaking this is the Form's CSS for the boxes:
.form-inner
{
/*background:url('../img/content-bg-top.png') no-repeat left top;*/
min-height:278px;
margin:-40px 0 0 0;
padding:72px 72px 21px 36px;
position:relative;
z-index:1;
font-size:14px;
-webkit-text-shadow:0 1px 0 rgba(255,255,255,0.4);
-moz-text-shadow:0 1px 0 rgba(255,255,255,0.4);
text-shadow:0 1px 0 rgba(255,255,255,0.4);
}
Any suggestions?
padding values are for the distance between object's itself and inner content.
You should use margin key for each textboxes in the content which is classified as form-inner.
.form-inner input[type=text]
{
margin: 10px 20px;
}
Margin defines the distances between object's itself and the other object next to it.
margin: [top] [right] [bottom] [left]
From styl.css (line 317)
.form-field { ... margin: 0 0 3px } (bottom margin only...3px)
All 4 of those input boxes are inside containers with .form-field class.
One fix:
.form-field { margin:0 10px 3px }
.form-field:first-child { margin-left:0 }
(that may need to be margin-right. I've never worked with right to left text)
You can add margin-right property on .form-field class, but remember to set bigger width on form.
I think .form-inner is the box around your form. If you want more space between your text boxes, you should style the .form-field class.
For example:
.form-field {
padding-right:10px;
}
This is a problem I am always having.
The following HTML:
<form id="sy_login">
<ul class="form_column">
<li>
<input id="sy_login_username" name="sy_login_username" placeholder="Username"></input>
</li>
<li>
<input id="sy_login_passowrd" name="sy_login_password" placeholder="Password"></input>
</li>
</ul>
</form>
Followed by the following CSS:
#CHARSET "ISO-8859-1";
body {
background: #DDDDDD;
padding:0px;
margin:0px;
}
input[placeholder], [placeholder], *[placeholder] {
font-style:italic;
}
.form_column {
list-style-type: none;
padding: 0px;
margin: 10px 10px 10px 10px;
width:100%;
}
.form_column input, .form_column textarea, .form_column select {
width: 100%;
}
Yields the following result:
This is a firebug inspect of one of the input fields.
From what I can tell, ul is clipping out of the parent form due to the margin.
I need the ul to consist of a margin whilst having a width of 100% and for the inputs to also be 100% in width.
Updates:
I attempted replacing the margin with padding as that would have had the same intended desired effect, but it looked exactly the same. I really want to avoid a case of having to use static widths on the inputs themselves.
Another note that might prove useful for answering is that this only needs to work in HTML5, a cross standards solution would be good, but there is technically no need.
After removal of width:100%
It is now looking much better. However I have highlighted the problem with the input, the input needs padding for the text, yet the width of the ul must be dynamic to the parent form, with itself must have a dynamic width to the window.
Remove the margin from UL.
Give padding to FORM. (that gives auto margins to ul).
Also do remember, When you set the width to 100% for any element then it will take the full width of its parent element, now adding some margin or padding to this element exceeds the full width of parent and may break the UI.
i.e Margin(=10px)+Width(=100%) > Width of Parent element.
Visit this link to get an idea of css box model.
http://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/
thank you.
Let's see another full version: The red border is belong to a form, a blue border belongs to a UL. Remove it if you want.
body {
background: #DDDDDD;
padding:0px;
margin:0px;
}
input[placeholder], [placeholder], *[placeholder] {
font-style:italic;
}
#sy_login{
border:solid 1px red;
}
.form_column {
border:solid 1px blue;
margin: 0px;
padding:5px;
}
.form_column ul,li{
list-style-type: none;
margin:0px;
padding:0px;
width:auto;
}
.form_column input, .form_column textarea, .form_column select {
width:100%;
}
Try commenting width:100% on form_column
.form_column {
list-style-type: none;
padding: 0px;
margin: 10px 10px 10px 10px;
'width:100%;
}
Refer LIVE DEMO
.form_column {
list-style-type: none;
padding: 0px;
margin:10px;
}
Try something like this:
.form_column {
list-style-type: none;
padding: 10px;
margin: 0;
width:100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}