I have an incredibly simple layout, you can see it here
<html>
<head>
<style>
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
margin: 0;
padding: 0;
}
ul.mm_sortable_items {
list-style: none;
}
ul.mm_sortable_items li {
display:inline-block;
margin: 0;
}
ul.mm_sortable_items a {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="mm_quicksand_container">
<ul class="mm_sortable_items">
<li class="game_filter_1" id="game_8"><img src="images/itg_0.png"/></li>
<li class="game_filter_1" id="game_9"><img src="images/piu.png"/></li>
<li class="game_filter_2" id="game_10"><img src="images/default.png"/></li>
<li class="game_filter_2 game_filter_3" id="game_11"><img src="images/cam-teng.png"/></li>
</ul>
</div>
</body>
</html>
I want the images to be next to each other with no spaces in between. To the best of my knowledge, what I currently have should do it, but instead there are these gaps between the pictures.
How do I get rid of them?
You literally have put spaces between them. If you remove the spaces, the images will come together.
display:inline-block displays elements as if they are inline. In other words, the line breaks between your images is being read as white space.
You can solve this using:
float:left; rather than display:inline; in your CSS
There are workarounds with negative margins, etc. as others have suggested, but this is the usual way to do what you are asking.
Just remove the display:inline-block on your list items and float them instead.
ul.mm_sortable_items li {
float:left;
}
add this css
.mm_sortable_items {
font-size: 0;
}
Due to spaces between your inline block elements (LI). There are several ways to fix it, you can remove the spaces but it will be hard to read. You could also do negative margin on the li but I personally like the font-size 0 since you have no text anyway
You have following
ul.mm_sortable_items li {
display: inline-block;
margin: 0;
}
Just add
float: left;
in ul.mm_sortable_items li.
I would've had the reflex of using a table, which would have a single row and a cell for each image (especially since they are of the same size). Then you could make the size of the cell, using basic CSS the same as the image's one, such that there is no space between them.
I had spaces in my markup to keep it neat. The browser was rendering it as a single space between each image. Whoops.
Add a
float:left;
rule to the
ul.mm_sortable_items li
selector.
You have two options in CSS
Option 1:
ul.mm_sortable_items li {
margin-right:-4px;
your other CSS here...
Option 2:
ul.mm_sortable_items li {
float:left;
your other CSS here...
Float left is probably considered more of the proper way to do it.
Images in HTML are by default inline elements. What this means is that images are considered equivalent to letters in text. So, there is a space between each image equal to the space between letters. To remove the space between images, you need to use this CSS property on the container of the images:
letter-spacing: -4px;
That will get your images to stick together.
Related
I am trying to remove the indentation and bullets from a bulleted list using CSS. Here is what I am doing:
.entry-content ul{
list-style-type:none;
padding:0;}
The bullet points are removed from the list, but the indentation is not fixed. Here is the HTML:
<div class="entry-content">
<ul class=wp-block-categories wp-block-categories-list">
<li class="cat-item cat-item-8">Advice
</li>
</ul>
</div>
Here is an image before I apply the CSS:
https://imgur.com/Sw31pHJ
Here is an image after I apply the CSS:
https://imgur.com/Utnt5vI
Does anyone know why the indentation isn't being removed? I am doing this in wordpress.
You have an error in your HTML.
<ul class=:wp-block-categories wp-block-categories-list">
should be
<ul class="wp-block-categories wp-block-categories-list">
As for your CSS, one of these is the most likely:
The li may have a margin as well. try .entry-content ul li { margin-left: 0; }
Your selector isn't specific enough, try .entry-content ul.wp-block-categories-list instead
Your ul may have margin instead of padding (doubtful)
You can try and diagnose these with DevTools/your browsers inspector, it will show you all of the positions/margins/paddings and everything related to the element's bounding box:
You likely also need to apply:
.entry-content ul li {
margin-left: -20px;
}
The exact amount of margin will differ based on the size of your font, but 20px is the default.
Pls see: Demo
What I want to do is: horizontally, put the first sentence on the left, and put the other one right. Vertically, I want to align them to the bottom. The two sentences are not the same font size. I searched this topic for a while and think display:table-cell should work, but you see, the two sentences are not bottom aligned. Any help will be appreciated!
HTML
<div class="di_header">
<div class="di_h_en"><p>I'm left</p></div>
<div class="di_h_cn"><p>I'm right</p></div>
</div>
CSS
.di_header{
display:table;
width:100%;
}
.di_h_en{
width:30%;
display:table-cell;
vertical-align:bottom;
text-align:left;
border:solid 1px red;
}
.di_h_cn{
width:70%;
display:table-cell;
vertical-align: bottom;
text-align:right;
border:solid 1px red;
}
.di_h_en p{
font-size:32px;
}
.di_h_cn p{
font-size:24px;
}
check this Fiddle
*{
margin:0px !important;
}
You need to remove the auto generated margins. i've specified the height of your table cells to see the effect of bottom alignment
Remove margin and you will get your desired output
.di_h_cn p {
font-size: 24px;
margin: 0;
}
as p tag has these two rules to add margin
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
Use this only to solve your issue
p{margin:0;}
When you write HTML you should know that most of HTML tags takes default margin and padding. To remove those margin and padding you should use one of the following techniques:
Use CSS Reset [recommended]
Use following CSS
body, p, h1, h2, h3, h4, h5, h5, h6, form, input, blockqoute {
margin: 0;
padding: 0;
line-height: normal;
}
By using one the above techniques your HTML elements behaves same in cross browsers.
On http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=none, a nice overview is provided for the different list-style-type values.
However, for the value none, it still reserves some horizontal space for the empty list symbol. Is there a way to remove this horizontal spacing, so that the text actually moves to the left as if it was no list? I would like to use text-align:center on the list items, and this horizontal spacing makes them not really centered. And I need to use <ul> because the CMS brings it in that way.
Basically, by default list-style-type:none does a visibility:hidden on the bullets, while I would like to achieve display:none on the bullets instead. What would be the proper way to do this?
It's the browsers default styling that's adding that space, just use a CSS reset to reset all of the browsers default styles. Most block elements have some default margin/padding .. even the <body> element has 8px of margin applied to it by default.
Here is a link to Eric Meyer's reset: http://meyerweb.com/eric/tools/css/reset/
Just to see for yourself, add:
ol {
margin: 0;
padding: 0;
}
/* This would be declared in the above reset */
Make sure to add browser reset styles before you start working with CSS.
You have to add this:
ol, li {
margin: 0px;
padding: 0px;
}
for this question.
A better way to this these days I found recently is to set the <ul> to display: contents;. Thus the css should look something like this:
ul {
list-style-type: none;
display: contents;
}
ul > li {
padding: 0;
margin: 0;
text-align: center;
}
This should do the trick.
add
margin:auto;
float:none;
display block; to your css for the ol element, this will remove the padding and align the elements in the centre
<p>Text</p>
<ul>
<li>One</li>
</ul>
<p>Text 2</p>
How do i remove the vertical space between paragraph and the list.
To be more specific - how do I reduce the bottom margin/padding of the p tag ONLY when followed by an unordered list. All the answers I see here remove the space after all p tags - that's not what was asked.
You can use CSS selectors in a way similar to the following:
p + ul {
margin-top: -10px;
}
This could be helpful because p + ul means select any <ul> element after a <p> element.
You'll have to adapt this to how much padding or margin you have on your <p> tags generally.
Original answer to original question:
p, ul {
padding: 0;
margin: 0;
}
That will take any EXTRA white space away.
p, ul {
display: inline;
}
That will make all the elements inline instead of blocks. (So, for instance, the <p> won't cause a line break before and after it.)
One way is using the immediate selector and negative margin. This rule will select a list right after a paragraph, so it's just setting a negative margin-top.
p + ul {
margin-top: -XX;
}
This simple way worked fine for me:
<ul style="margin-top:-30px;">
I got pretty good results with my HTML mailing list by using the following:
p { margin-bottom: 0; }
ul { margin-top: 0; }
This does not reset all margin values but only those that create such a gap before ordered list, and still doesn't assume anything about default margin values.
p, ul{
padding:0;
margin:0;
}
If that's not what your looking for you'll have to be more specific
You can (A) change the markup to not use paragraphs
<span>Text</span>
<br>
<ul>
<li>One</li>
</ul>
<span>Text 2</span>
Or (B) change the css
p{margin:0px;}
Demos here: http://jsfiddle.net/ZnpVu/1
Every browser has some default styles that apply to a number of HTML elements, likes p and ul.
The space you mention is likely created because of the default margin and padding of your browser. You can reset these though:
p { margin: 0; padding: 0; }
ul { margin: 0; padding: 0; }
You could also reset all default margins and paddings:
* { margin: 0; padding: 0; }
I suggest you take a look at normalize.css: http://necolas.github.com/normalize.css/
I ended up using a definition list with an unordered list inside it. It solves the issue of the unwanted space above the list without needing to change every paragraph tag.
<dl><dt>Text</dt>
<dd><ul><li>First item</li>
<li>Second item</li></ul></dd></dl>
Setting the width of both the textbox (ie. input type="text") and the textarea to 500px doesn't work in IE6 and Chrome, only works fine in FF2 (haven't tested other browsers), IE and Chrome add two pixels to the textbox.
Padding and margin is set to 0 on all elements using
*
{
margin: 0px;
padding: 0px;
}
Changing the doctype from xhtml 1.0 transitional to strict didn't work too.
You need to explicitly set a border of 1px and make the width 498px, or make the border 0 and the width 500px, although the latter will make the input impossible to see unless you know it's there, so from there it's just a styling issue.
You might have some luck using a set of reset styles in your CSS. They go a long way to eliminating the cross-browser differences between the way elements are rendered.
Eric Meyer (one of the web's best minds on CSS) describes reset styles and why he uses them here -- with his latest version here.
That said, without knowing the overall effect you're trying to achieve, form elements are notoriously difficult to style in a way that is perfectly consistent across browser platforms. Best of luck. :)
I use CSS3 to make textbox and input work the same. See jsFiddle.
.textarea, .textbox {
width: 200px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Works in IE8+, see caniuse.
I also think that the problem is in border. Try defining the border style specifically for inputs/textarea together with their width.
input, textarea{
border:1px solid grey;
width:498px;
}
Also take a look in the source if input/textarea is not defined anywhere else or in their own tag (e.g. size or rows/cols).
Other option when IE messes around is using special css file for it. However IMHO it shouldn't be necessary in your case.
I would recommend first to avoid that "star" reset rule, as it only brings problems down the line. Instead prefer a specific reset like
ul, ol, p, blockquote, h1, h2 /etc.../ { margin:0; padding:0; }
FORM ELEMENTs, in fact, is where the star rule does the most damage.
AFAIK, setting padding and width explicitly to a textarea and an input element, will give the exacts same pixel width in all browsers.
IE6 does add a 1px margin to the TOP and BOTTOM I believe, not the sides.
Here's an example of a RESET rule taht does'nt break the default properties of form elements:
/*---------------------------*/
/* Base rules & reset */
/*---------------------------*/
body {
font-size:11px; line-height:1.2em; font-family:Verdana, Arial, sans-serif;
margin:0; padding:0;
background:#fff url(/01/images/cassis/body-bg.gif) repeat-x 50% 0;
color:#303030;
}
p, pre, blockquote, address, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, form, label, fieldset { margin:0; padding:0; }
ul, ol, li { list-style:none; }
input, select, textarea { font:11px Arial, sans-serif; color:#333; line-height:1.2em; }
table, caption, td, th { margin:0; padding:0; font-size:11px; line-height:1.2em; font-weight:normal; }
img { display:inline; }
/* cross-browser clearing of floats (no extra space in IE) */
div.clear { clear:both; overflow:hidden; height:0; }
These are just random, but you get the idea. Don't clear margin and padding on everything, it's much safer to clear what you need to, and leave the browser defaults elsewhere.
I have been experimenting and found out that "the ratio" between text input and textarea can be calculated using 21 * 8*x.
If you have
< input type="text" size="X" />< br/>
< textarea cols="X">< /textarea>
... and you want them to be equally wide, use this formula to calculate the width for the input text.
if x = 70 then 21*8*70 = 581px
So you will write:
< input type="text" size="70"
style="width: 581px" />< br/> < textarea
cols="70">< /textarea>
The two will become equal!
In this way in a program/website/etc you can enter the same value and get the same result (cols in textarea)!
Try
input{
border:none;
}
<!--***********************CSS**************************-->
<style>
.set_font
{
font-family:verdana;
font-size:10px;
color:#ffffff;
width:250px;
}
.set_font2
{
font-family:verdana;
font-size:10px;
color:#000000;
width:250px;
}
</style>
<!--*******************HTML**************************-->
<input type="text" size="33" class="set_font2" name="inputName" id="inputName" value="inputValue" maxlength="50">
<textarea cols="30" rows="8" class="set_font2" name="inputName" id="inputName">inputValue</textarea>