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
Related
Difficult to come up with a good title - by all means, change if you can.
Traditionally, a margin on an element can be used to move elements around a page relative to its previous elements. So, if I had a div as a column on my page I could shift elements vertically within that by setting their top-margin CSS property.
This is handy in dynamic pages where some elements might not exist according to given condition, eg, a very simple example here:
https://jsfiddle.net/jhartnoll/4s6pcLu0/1/
I have simply defined a column with a div element, positioned two other div elements and made one of them have a 2em vertical gap between it and its predecessor.
If you remove (or set Display:none) element #one then element #two is shifted up the column and positioned 2em from the top of the column, rather than 2em from element #one which is no longer there.
However, if I try to do a similar thing using a CSS grid, thus making the DOM tree simpler and more flexible, I run into a problem:
https://jsfiddle.net/jhartnoll/xvhycg0k/11/
In this case, the columns are set by the CSS grid so are sort of pseudo columns, but when I set my elements to have margin-top: 2em the margin is calculated from the top of the grid column, not relative to a predecessor element.
Therefore, if element #one is not present, #two simply remains 2em down from the top leaving a gap above...
This behaviour renders margin-top useless, because it is exactly interchangeable with top on relative positioned elements.
Is this a bug with CSS Grid, or am I using it wrong, or is there a way around this?
CSS Grid seems great, but I have run into several problems like this where dynamic content is concerned, if elements have potentially variable heights, or may not be there at all, the Grid leaves other elements floating in space, unable to shift up.
EDIT for clarity of the dynamic problem
Thanks for the comments so far. The problem is not with using the layout, I understand how to set up grids, and rows, define sizes, spaces, span etc, the problem is with dynamic content.
Supposing I have an extremely simple product page:
https://jsfiddle.net/jhartnoll/xvhycg0k/42/
Irrespective of the grid spacing, row/column size etc, the concept is simply that I have thrown in a "Price reduced by 10%" splash element above the product title.
Naturally, product pages would be using templates and therefore the HTML and CSS should be fixed and flexible enough to enable elements to be missing or present.
Not all product pages will display the 10% off deal, so on those pages, I would want the Product Title to shift up into the top element position.
This, as far as I can tell, cannot be achieved with grids.
Similarly, if there was a div which contained a product description and underneath it some product cross promotion or something, the description might be of variable length, so with the div as a column example in the my original question, the content would automatically expand the description grid and shift the cross promotion stuff down the page. Again, this can't be achieved with grids?
So, I was messing around with using a grid defining columns only and simply one row per page so that content could be stacked in columns similarly to the original div as a column example, but then I ran into this margin-top problem which, within a Grid is that margin-top is relative to the grid top, not to the elements above.
So I can't find a way of creating a dynamic website, using a template design which allows for conditional elements and variable element dimensions using Grid and without using Javascript to manipulate on page load.
In my mind, there should be an option for a row-shift property to allow elements to jump down a row if the content is too large, or jump up if there is nothing obstructing it... or something like that anyway!
Hey try the following code I guess it will help your requirement!
#column{display:grid;grid-row-gap: 10px;width:4em;height:auto;border:1px solid grey;}
#one{background:red;width:2em ; height:2em}
#two{background:blue;width:2em ; height:2em}
<div>
<div id="column">
<div id="one">
</div>
<div id="two">
</div>
</div>
</div>
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>
Since I am having trouble with Firefox about positioning a block element by nature (header) to be inline by using display:run-in; i'm asking you for your help ! been searching for quite some time now and I cant find which CSS method could be used instead of just applying display:run-in; to the element, which is supported in all the major browsers. It is crucial that i position the element this way.
Anyone knows a method how to do this ?
If you'd like to display your element as a block element, but would position it inline, then
display: inline-block;
will do the trick for you.
The MDN still lists run-in as an experimental value, so we shouldn't be too surprised if it doesn't fully function in Firefox at this time.
As for options, there are at least two you could use: display: inline and display: inline-block.
Inline might suffice if you don't need the properties of a block element on your header. Inline-block keeps it as a block element, so you can still do nice things like give it width, height, margin and so on.
View them on JSFiddle.
Alright i found a solution ! :) Using display:inline; in a combination with float:left; will make a block element by nature use space only as much as he needs, not full 100% of its parent element.
There is just one problem with this tecnhique if you are using bigger font for lets say a heading and want to add a paragraph right after it (on the same line). If the headings font-size is a bit bigger, heading could take 2 or even more lines of space in height where paragraphs text should be,and you will have a small gap between header and another row of paragraph under it. The solution is to add display:block; and margin-top:Xpx; to the paragraph element to align it as needed.
This is bothering the crap out of me and I can't see what's not allowing it to float left.
I've set a margin-left of 120px to the header text (450 Set, 230 Set, etc.) and did a float left to the link element with the image inside of it.
Here's the link to the site where it's happening: http://cl.ly/6lQa
What am I over looking or not seeing?
Thanks!
It's the h2 tag that's screwing it up. Use a div tag instead and apply the styles that you want.
Generally, I refrain from using the h1,h2,h3,h4..... tags because they come with pre-done stylings. I prefer to create classes for all of my stylings and use div or span tags. Only if I'm doing SEO, I'll use some h1,h2 tags at the top, but nothing more than that.
On a side note, you should also try to get away from relying on float. It is not a good way to go..... different browsers handle it differently, and many times I get errors like what you were getting here. Instead of float, use position:relative and place the elements on the page by specifying the pixels at which you would like them (e.g. left:200px, top:100px etc).
I just started using BlueprintCss, which provides a great framework to easily layout pages. It divides the page up in a grid, and using pre-defined classes, you layout the page (without floats!). It's amazing, you should look into it.
You should move <h2 class="entry-title"> above the a element containing your image.
Set a width on the <h2> that will fit into the remaining space (with the 120px margin) OR better yet use a <div> instead of the h2 and style the font the same way
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.