I have HTML page that contain multiple div element each div is card that display as inline-block the number of generated div depends on row data comes from server, until here every things going as i need but theres whitespace between each card div that make an inappropriate display on phone and i think the problem from whitespace i'll attach screenshot for inspector?enter image description here
display:inline-block seems to leave very small spaces between elements.
Either use flexbox (display:flex on parent element) or a little trick of adding margin-left:-1px to each element (or however much space is being created between each element).
Inline elements are treated as text. (I'm making this overly simplified.) Notice that text has spaces between words. Images have spacing between them for the same reason. Therefore, inline elements will have spaces between elements.
The way around this is to trick the browser into thinking elements are letters
<div>content</div><div>content</div>
Now there is no spacing or elements between content.
There are other ways to do the same thing, such as:
<div>content</div
><div>content</div>
Related
I'm trying to design a 2 column layout for getting a feel for HTML again.
I want to avoid using floats because I want to keep the natural document flow. Every other question on Stack Overflow I browsed through incorporate floats or worse tables. I tried layouting it with flex as well but I couldn't figure out how to make both the columns stay the same size on the other pages with different amounts of content in the first column.
Here's what I got so far: http://jsfiddle.net/wykenakw/
I figured out through trial and error that I can use a negative margin to line up the sidebar to the main content but it feels awkward, quirky and hacky. I inspected every element inside my columns but I couldn't find any potential child elements with margins that could cause this 4px gap. It's driving me nuts.
Am I missing something? Am I doing something wrong?
float is ideal because it will essentially cut out the "white space" for you. You can try and use: white-space-collapse:discard on parent elements (in this case #wrapper), but I rarely have success using it.
White space is just a "natural" occurrence created by the browser rendering. In order to avoid this (without using float), you need to simply remove the white space between your elements. This isn't ideal because of the flow and indentation of the elements, but without using float it's what has to be done.
Additionally, in my opinion there is nothing wrong with using float as a "natural document flow". You can always clear the elements.
So instead of:
</main>
<aside id="col_2">
You'd have:
</main><aside id="col_2">
Hope this helps!
http://jsfiddle.net/wykenakw/1/
Change your <main> into a <div> or use css to turn it into a block element:
main {
display: block;
}
As mentioned in the other answer actual spaces between the two elements is causing the unwanted whitespace. However spaces between two block elements is always ignored.
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Margin-Top not working for span element?
(6 answers)
Closed 9 years ago.
I'm effectively a noob with HTML and CSS, I don't consistently live in this space to retain and progress so feel free to treat me like an idiot.
Very often when I'm styling a page the margins have no effect. For example, in the following snippet:
<h1>Title</h1>
<p>I introduce the section and talk about the stuff in this area.</p>
<div class="preWrapper">
<pre><code>I am some XML</code></pre>
</div>
<div class="controlsWrapper">
Download XML
< ... form controls, input etc. ... >
<div>
If I try and set a top margin on the Download XML anchor, it has no effect at any size. Why could this be?
Is there a general lesson here about the way this all works that I either keep forgetting or don't quite have a handle on yet.
I have read good-sized CSS books cover-to-cover - I do try - and I've been a netmag subscriber for about 6 years. I know there are lots of quirks and gotchas, I just can't remember them all.
Thanks.
I think in these situations you might be mainly encountering the differences between block-level elements and inline elements.
In HTML, a block level element is used for larger sections of content, and often contains other elements. You use them to lay out everything on your page. Block level elements are, for example, section, div, header.
Inline elements are smaller tags that hold either links or small chunks of texts, like a or span. While block level elements will automatically place themselves on a new line in your layout, inline elements, by definition, will stay exactly where they are in the markup.
Because of this distinction, block level elements can usually be though of as inside an invisible, clearly defined block, that usually spans the width of the page. With a block like this, you can easily imagine padding and margin, because its edges are well defined. Inline elements, however, are tricky, and don't render themselves inside any specific block or rectangle -- their dimensions are defined solely on the text inside them. This is why it is more difficult to apply margins.
A fix in the above would be to give your a a display: block style in the CSS. It will then by default take up the entire width of the page, and its height will be as large as is required by the size of the text. Margins and padding can be easily added.
If you're then faced with not wanting your a to be so wide, but position itself snugly next to other elements, you can change the display property to inline-block -- this can be thought of as kind of half way between block and inline elements. It will only be as wide as the text inside, but it will get that imaginary rectangle around it that can then be made larger with margins and padding.
Here's some reading: The CSS box model
Sorry for misunderstanding your question.
You need convert your <a> into an inline-block element for it to work.
Here is the code.
The Code:
Download XML
PS: 40px is a dummy value for margin-top. You can replace it with your value.
If you have defined position of the element relative or absolute that time margin value would not work, for this you can try using top
This is a very basic html-css query that I often encounter. Most times, I find the solution some way or the other, but am interested to know the reason of this unexpected behavior(as per me) of UI.
Please have a look at this fiddle: http://jsfiddle.net/2yaRU/
<div > //float left
Sometext <span> text<.span>//float:right
<div>
the right floated text moves to the next line though there is a lot of width available in my line. Ideally as per me, the text should appear side by side with float:left as left side, and float:right at right side within the div.
This cant be a complex issue, so is there something very common I do not get here?
Put the floated item first. The floats are nested inside of each-other, so they won't affect each-other. Floating an element automatically changes it display:block;
I think there's a couple things going on. Since the wrap is float:left, it switches to a block formatting context. It looks like the issue is that the whitespace that comes after the text (just before the nested float) is considered to be trailing since there is nothing is in the flow after it. So the width of the parent does not take into account the space, even though it does take up space when the layout is rendered as you can see in the html.
Removing the trailing space brings the X back onto the same line as the text.
http://jsfiddle.net/2yaRU/8/
If you want a space after the text, you should add a non-breaking space ( ) to the html instead.
http://jsfiddle.net/2yaRU/9/
I'm trying to create a block quote that has huge quotation marks on it's sides. The text content of the block quote is dynamic and so the marks should align according to it's size.
I've used an inline-block element so it will shrink-to-fit and contain it's text, and I'm 90% there, but my only problem is that an inline-block element becomes a block element when it has multiple lines.
To illustrate why this is a problem, I've made jsfiddle snippet:
http://jsfiddle.net/kTQqC/1/
As you can see, most of the blocks look right:
Single line - no problem. The closing mark attaches itself to the
last word.
Multiple lines - The blockquote takes full available
width. Still, not much of a problem.
Same as 2, just shorter words.
Here is where it get's tricky. Since the inline-block element
becomes a block element - it takes full available width and ruins the effect by putting the closing mark really far.
I have no control on the content's length of words. Sometimes example 4 will occur.
Does anyone have an idea how to solve this?
I am also willing to throw away all of this code if you have a completely different approach to get the same effect.
Thanks!
If you are willing to use a bit of scripting, you could do the following:
Put your text in a span with a class, like so...
<span class="words">1. Hello</span>
Then get the width of each span and dynamically adjust the max-width
$('span.words').each(function(){
var a = $(this).width();
$(this).parent().css('max-width', a + 'px');
});
http://jsfiddle.net/jasongennaro/kTQqC/15/
Sorted:
http://jsfiddle.net/kTQqC/14/
A span element will automatically be inline displayed, so your closing quote should automatically have been right beside your last word. I took your relative positioning off your blockquote element, and quote element. This left the spans sitting just a little up from the first/last words (as in too high) so I pushed them down using relative positioning on them individually, 10px for the opening, leaving it just above the first word, and 18px for the closing quote leaving it hanging below the last word. This is how these are when you see them in magazines.
How do you choose when to use DIV and when SPAN, to wrap something?
Many time when we make PSD 2 HTML, in some conditions to get any effect or to wrap something to get needed effect, we use div or span.
And I know div is block level element and span is inline level element and we can change display properties through CSS. and I also know div cannot come inside span.
What are cases when you use div as a display:inline and span as a display:block? and should we try to avoid those scenarios? is this semantically incorrect?
and when we use blank div or span (no content inside) to get some effect, than which is correct?
As you note, you should use divs as dividers of blocks, and spans for marking inline content.
And yes, you should try to avoid changing the display types of them.
Regarding blank element, div is better as you can define its width and height while for span it won't have proper effect.
Most simple example to prove this point can be seen in action here: http://jsfiddle.net/yahavbr/4DZkV/
This is still a good question but the suggested answers only seem to address part of the question. There are three CSS display types, which help put this into perspective: inline, block, and inline-block. If you read this other Stackoverflow topic, CSS display: inline vs inline-block, I think you'll get some useful guidelines. For example, if you need to ensure the element has distinct top and bottom padding and margins, then it probably needs to be a div (with CSS style inline-block), otherwise a span is probably a better choice.