I want to change the margin between the label and input of a simple HTML form. The labels are below the input fields. When I set a class I can change other properties like font-size but not margin.
A <label> is displayed as inline by default. You have to change that to inline-block or block in order to set the margin.
label {
display: inline-block;
margin: 10px;
}
Some resources to learn more about the CSS box model:
MDN article
CSS-Tricks article
Some resources to learn more about the display attribute in CSS:
MDN article
you can't set margin top and bottom for , because tag is called as inline element, if u need to set margin top or bottom,then change to block element like below codes
label {
margin: 10px 0px;
display: block;
}
or
label {
margin: 10px 0px;
float: left;
}
If you add css "Float:left" for any element , then tat will changed as block element
Think of spans and text to be inline. In-line elements must be turned block in order to use a margin. Also making it block means if the label is too big it can push content down.
Related
Here is my setup:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
span {
padding-left: 25px;
background: red;
}
<span></span>
I have span tag with settings of box-sizing:border-box and padding-left:25px. When this span tag does not have any values in it, its height and width are 0. So I expect the span tag not to display on the web page. However, It is still there, I think it is because of the padding-left. But I only set the padding-left so it still does not have height to display. But as you can see in jsfiddle, the padding displays on the webpage......
Why does it happen?
The box-sizing property only applies to elements that accept a width or height. By default, a span element is a non-replaced inline element, which means that the width property doesn't apply to it, thus the box-sizing property doesn't apply to it either.
For reference, here is a relevant link to the specification regarding which elements the box-sizing property applies to:
3. Box Model addition - 3.1. box-sizing property
Applies to: all elements that accept width or height
Here is the relevant quote and link to the specification regarding the width property and non-replaced inline elements:
10.2 Content width: the 'width' property
This property [width] does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats.
Therefore, if you change the display property of the span element to inline-block or block, then the element won't appear (as you seem to be expecting):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
span {
padding-left: 25px;
display: inline-block;
background: #f00;
}
<span></span>
make the span display:block or inline-block the will remove the extra space.
Quote from Head first html:
You can add padding to the top and bottom of inline element, but the padding doesn’t affect the spacing of the other inline elements around it, so the padding will overlap other inline elements
a) As far as I understand the above quote, adding padding to the top and bottom of inline element doesn’t ( ever ) have any effects on surrounding elements and thus on the look of the page?!
b) But what exactly is meant by “padding will overlap other inline elements”? Does it perhaps suggest that in certain circumstances padding ( top and bottom of an inline element ) will have effect on the look of the page?!
thanx
Use inline-block instead. Add these properties to all the elements on which you want to add padding. For example:
a:link {
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;
}
If I understand correctly, and from an example I just made:
a) the text is an inline element, so me adding a span with top and bottom padding is not pushing the other lines down
b) as you can see, since I've added a color to the span, the color will overlap the other lines.
I hope this is both right, and answers your question :D
Try this:
<style type="text/css">
div { background: blue; height: 4em; padding: 1em }
span { background: red; padding: .5em; }
</style>
<div>
<span>one</span>
<br/>
<span>two</span>
</div>
The padding will affect the element itself. For example, any text within the element will be more padded from other DOM elements.
I have a very simple HTML with CSS code, don't understand why, the css rule isn't applied to the a tag, but it works on p tags. If I wrap the a tag inside a p tag, the css works, but I can't understand why it doesn't work without wrapping it.
Here's a full example http://jsfiddle.net/juaning/84Xn2/
css: div p, a {
margin-top: 35px;
font-size: 24px;
}
html: <div class="family">
Luigi
</div>
The box model of an a tag is different than the box model of a p tag. Add this one line:
div p, a {
display: inline-block;
By default, an a tag has the display: inline box model, so that you can easily place it in the same line as regular text (i.e. inside a p). The p tag is more of an entity on it's own, always being a 'block' or 'box' of text, therefore the p has display: block; by default.
Fiddle: http://jsfiddle.net/ECAbd/1/
a tag is an inline element, and p is a block level element, margin won't apply to inline element, and hence you need to make your a tag, block or inline-block.
div p, a {
margin-top: 35px;
font-size: 24px;
display: block;
}
Now, here, again it depends, what you want your a tag to be, if you want multiple a tags to line up inside your div you will have to use inline-block and if you use display: block; it will take entire horizontal space and will render another element below it.
Take for example you've a horizontal menu, where you line up your elements, you will probably use ul and li but suppose you take div for each menu item, you may need display: inline-block;, this will have all properties of block level element, but it will render them inline leaving the other space empty for other elements to take up, but if you want to render each element below one another, you need to use display: block;(not for div tag or p tag, they are block level elements by default, inorder to change their behavior, you need to mention that in your CSS)
List of block level elements
List of inline elements
Anchors have display: inline by default, while paragraphs are (if I recall) display: inline-block. Margins do not apply to inline elements. You can easily fix this by explicitly setting display to inline-block in your CSS.
Add this rule to the css -
display: block;
Another solution replace your code "div p, a" by following
div p, div a {
font-size: 24px;
line-height: 100px;
display: inline; }
Notice I used line-height (same as box height) to make vertical align center rather than margin-top. But this is not the solution for multi line.
In this example, I'm setting width:200px on form labels.
This is not being applied for some reason, and the field appears 0 width when viewed in Chrome Dev Tools.
Any idea why?
label is an inline element, like a span. It does not have width, but flows with its content. To get it to behave like a div, you would have to instruct it to act like a block-level element:
display: block
From there, you could add width:
width: 200px;
float: left;
As above, you need to get your label to behave like a block element to get it to respect your width declaration. The simplest way to do this is to set it to inline-block like this:
#form label {
width:200px;
display: inline-block;
}
Or, as #David mentions, float it left. This article describes getting this to work cross-browser.
This is because the label is an inline element so does not have a width property. To set the width you need to make it a block or inline-block element:
#form label {
display: block;
width: 200px;
}
Label is an inline element, so you cannot apply a fixed width to it (unless you change its display behavior). See here for a quick map of options/browser compatibility
http://www.quirksmode.org/css/display.html
Quote from Head first html:
You can add padding to the top and bottom of inline element, but the padding doesn’t affect the spacing of the other inline elements around it, so the padding will overlap other inline elements
a) As far as I understand the above quote, adding padding to the top and bottom of inline element doesn’t ( ever ) have any effects on surrounding elements and thus on the look of the page?!
b) But what exactly is meant by “padding will overlap other inline elements”? Does it perhaps suggest that in certain circumstances padding ( top and bottom of an inline element ) will have effect on the look of the page?!
thanx
Use inline-block instead. Add these properties to all the elements on which you want to add padding. For example:
a:link {
display: inline-block;
display: -moz-inline-box;
-moz-box-orient: vertical;
vertical-align: top;
zoom: 1;
*display: inline;
}
If I understand correctly, and from an example I just made:
a) the text is an inline element, so me adding a span with top and bottom padding is not pushing the other lines down
b) as you can see, since I've added a color to the span, the color will overlap the other lines.
I hope this is both right, and answers your question :D
Try this:
<style type="text/css">
div { background: blue; height: 4em; padding: 1em }
span { background: red; padding: .5em; }
</style>
<div>
<span>one</span>
<br/>
<span>two</span>
</div>
The padding will affect the element itself. For example, any text within the element will be more padded from other DOM elements.