How can I remove the space between the <fieldset>'s in the following example? Here's a JSFiddle.
HTML
<!-- Displays bad, but HTML looks good -->
<fieldset>test</fieldset>
<fieldset>test</fieldset>
<!-- Displays good, but HTML looks bad -->
<fieldset>test</fieldset><fieldset>test</fieldset>
CSS
*
{
margin: 0;
padding: 0;
}
fieldset
{
background-color: red;
display: inline-block;
}
I'd like to be able to leave space between the <fieldset>'s in the HTML code, since their contents are quite long. But I need them to display right next to eachother.
The best solution is to remove any spaces between inline-block (or inline) tags.
You can use comments for better readability:
<fieldset>test</fieldset><!--
--><fieldset>test</fieldset>
There is no CSS solution which can be 100% reliable.
EDIT: it doesn't seem it's the case but some template engines provide this behaviour, like twig's spaceless
Demo
How about float: left;:
CSS:
fieldset {
background-color: red;
float: left;
}
A different solution is to put the fieldsets in a DIV container and set the font-size to 0 using CSS for that container. Then, of course, set the font-size of the field-sets back to whatever you need it to.
Setting the font-size to 0 on parent container basically removes the white-space between inline-block elements of that container.
Related
Cant seem to find how to remove vertical space between two text elements, There are some similar problems on this website but doesn't seem to actually work.
HTML Code:
<p>this website is</p> <h1>Encrypted</h1>
it seems that I would have to use a position code, but when I use a position code that lets other elements get close to it, the text gets pushed to another spot on the website
Remove white space between elements using CSS:
Horizontal being (top and bottom space)
h1, p {
margin-top: 0;
margin-bottom: 0;
line-height: /* adjust to tweak wierd fonts */;
}
Vertical being (left and right space)
.parent {
font-size: 0;
line-height: 0;
}
h1, p {
font-size: 12px;
margin: 0;
display: inline-block;
}
JSFIDDLE
Every browser has pre-set styles for elements. p and header tags have margins set. You can change this by using margin: 0;: JS Fiddle
You may also benefit from using a CSS Reset to avoid these issues.
Also, I don't imagine a scenario where the word "encrypted" in your code should be using an <h1> tag: How to properly use h1
I'm having some frustrating trouble with my FAQ accordions at the bottom of the following page.
I need to put about 50px of space in between them, but nothing seems to be working.
Any suggestions?
Try adding to your css:
.accordionButton {
margin: 25px auto;
}
.accordionContent p {
padding-top: 10px;
margin-top: 0;
}
div.accordionContent {
margin-top: -25px;
}
Hope this helps :)
Step 1: Wrap each question and answer in a div in my example I've given it a class container
Step 2: Remove float:left from your styles
Step 3: Add margin-bottom to the container
.container {margin-bottom:50px;}
Example: http://jsfiddle.net/c6Kvz/2/
For a tidier more semantic version please see: http://jsfiddle.net/VyzqR/. This uses CSS for the hover effect instead of javascript. Feel free to replace th h2 tag with what ever hx tag mages the most sense for your document layout, just don't use h1!
You may also want to investigate CSS Sprites for your background images. This will reduce filcker while the images load on hover or click.
I want to align text within a list of items containing superscript such that the main text are equally spaced vertically:
HTML:
<ul>
<li>Shape: Rectangle</li>
<li>Length: 5m</li>
<li>Breadth: 3m</li>
<li>Area: 15m<sup>2</sup></li>
<li>Color: Blue</li>
</ul>
I have tried tinkering with the display, height, line-height and vertical-align properties in CSS. But none seems to work. Can anyone help me please? Thanks.
The cause of the problem is that superscripts tend to make line spacing uneven. Setting line-height to a sufficiently large value like 1.3 may help. But in general, it is best to avoid using the sup element and construct your own superscript element, using span and style that creates a superscript using relative positioning (which does not affect line spacing, unlike the vertical alignment caused by sup).
In this specific case, there is a much simpler and better approach: instead of <sup>2</sup>, use ², or enter directly the superscript two character “²” (on Windows, you can do that using Alt 0178). Being a normal character, it does not affect line spacing, and being designed by a typographer, it can be expected to look better than any superscript 2 created using HTML or CSS.
This might help you: http://jsfiddle.net/Wexcode/TgqQY/
HTML:
<ul>
<li><span></span><span>Shape: Rectangle<span></li>
<li><span></span><span>Length: 5m</span></li>
<li><span></span><span>Breadth: 3m</span></li>
<li><span></span><span>Area: 15m<sup>2</sup></span></li>
<li><span></span><span>Color:</span> <span>Blue</span></li>
</ul>
CSS:
ul { list-style: none; }
li { background: red; height: 50px; margin: 3px 0; padding: 5px 0; }
li span:first-child { height: 100%; }
li span { vertical-align: middle; display: inline-block; }
Depending on format, you can try lowering the font size just before calling the <sup> tag:
...<br/> <li>Area: 15m<font
size=-1><sup>2</sup></font></li>
...<p/>
There is still a slight spacing gap, but it is not really noticeable.
Line-height causes gaps between images and other elements but changing its value to 0 makes any text impossible to read, is there any easy fix for that?
Imagine some repeatable DOM element like a shadow, how would you erase gap between this element and anything that is above (may be an image, div, span, button, form)?
Setting class for this .shadow and giving it line-height of 0 of course doesn't work as line-height works a bit differently.
I made 3 images, the first one shows what I'm talking about, the second one fixes it, the third one shows how the second one in fact destroyed the whole layout:
http://jsfiddle.net/J5PLf/
I'm thinking about something like:
body {
line-height: 0;
}
p {
line-height: 1.2em;
}
But I guess it's a bit risky, what if there will be some free text not within tags?
Don't mess with the line-height propety, and set display:block at the images.
Fiddle: http://jsfiddle.net/J5PLf/1/
#example1, #example2, #example3 {
width: 200px;
float: left;
}
img {
display:block;
}
Is there a nicer way of styling a <hr /> tag using CSS, that is cross-browser consistent and doesn't involve wrapping a div around it? I'm struggling to find one.
The best way I have found, is as follows:
CSS
.hr {
height:20px;
background: #fff url(nice-image.gif) no-repeat scroll center;
}
hr {
display:none;
}
HTML
<div class="hr"><hr /></div>
The classic way of doing this is creating a wrapper around the <hr> and styling that. But I have come up a CSS trick for image replacing the element without the need for extra markup:
For non MSIE browsers:
hr {
border : 0;
height : 15px;
background : url(hr.gif) 0 0 no-repeat;
margin : 1em 0;
}
Additionally for MSIE:
hr {
display : list-item;
list-style : url(hr.gif) inside;
filter : alpha(opacity=0);
width : 0;
}
See entry on my blog for further info and an example of the trick in action.
If you set display to block it should behave more like a <div>.
Your answer you should remove hr altogether and just use the div
You could apply the background image to the bottom of the preceding element, perhaps with a bit of extra padding. That way you can get rid of any surplus / non-semantic markup.