The text have a big space in the bottom here: http://jsfiddle.net/qHaFR/
And I am not able to remove it.
Can you tell me how to do it?
The wrapper, in this case <span> needs to be a block element with width and height defined. You'll also need to change the line-height to match the height of the container.
So your style would look like:
#foo {
background-color:yellow;
font-size:260px;
border:1px solid black;
width: 190px; /* if display: block; */
line-height: 200px;
display: block; /* or inline-block */
}
Just to clarify, were you trying to wrap A in an element such as <div> or <h1> you shouldn't need to declare it display: block because div and h1 are already block.
It's because the line-height is actually that big, in order for each character to be displayable there. In some languages that space is fully used. For example, if you'd type ÁĄ, you'd need whole 260px. If you're okay with not being able to display those characters, you'll need to change line-height accordingly and display it as a block:
#foo
{
background-color: yellow;
font-size: 260px;
border: 1px solid black;
line-height: 200px;
display: block; /* or inline-block */
}
If you're not okay with treating it as a block (it gets 100% width then or you'll need to set it yourself), use display: inline-block;. Also, type ÁĄ instead of A and see that the letters get their top and bottom cut. Here, see this: http://jsfiddle.net/vmVcr/.
Related
I want to add padding in my hr,
hr {
padding-left: 200px;
}
but it's not working. how to add padding in my hr ?
Padding does not work in hr.
You have to use margin instead:
hr {
margin-left: 200px;
}
And it'll work.
Before adding padding, you should have to set a width for your hr otherwise it will display in full width.
hr:first-of-type{
width: 100px;
padding-left: 10px;
}
hr:last-of-type{
width: 100px;
padding-left: 50px;
}
<hr>
<hr>
Thanks and best regards!
HR is slightly different from most HTML tags in its defined behaviour, as it tries to fill up the whole width of the containing element.
The only way I know to stop it expanding over any margins is to explicitly set a width attribute
hr {
width: 90%;
padding-left: 200px;
}
Even then, it seems to ignore the padding, so you should use a margin instead:
hr {
width: 90%;
margin-left: 200px;
}
It's still kind of scrappy and imprecise. If the ruled line needs to be in line with some other element, you're probably best ensuring that they are in the same DIV, so that the ruled line can start at the left margin of the div.
As Python mentioned, padding does not work with hr
A good solution would be to place the hr inside a div
Another workaround (not recommended, more like a band-aid) would be to create a div and apply styling to it to create a line, particularly add a single border to it
For example,
<div class="divider"></div>
And for the styling
.divider {
border-top: 1px solid #081521; /* Create the border, i.e. Divider */
margin: 1rem auto; /* Add a Margin and Center the divider */
}
I have the following problem: I am creating an inline-block element (.content) within a wrapper-div (.wrapper). If there is content in the .content-div, everything works just fine. But if I remove the content from the .content-div, a space gets added below the inline-block-div.
I am not sure why this happens and how to fix it correctly. Note that after manually removing all spaces and line-breaks in my code the problem persists, but setting the font-size to 0 helps.
Also, setting vertical-align: top to the .content-div helps. I am not sure why exactly.
Whats the best way of fixing it? Why does this happen?
Fiddle: https://jsfiddle.net/cjqvcvL3/1/
<p>Works fine:</p>
<div class="wrapper">
<div class="content">not empty</div>
</div>
<p>Not so much:</p>
<div class="wrapper">
<div class="content"></div>
</div>
.wrapper {
background-color: red;
margin-bottom: 20px;
/* font-size: 0; *//* this would fix it, but why? (problem persists after manually removing all spaces and breaks) */
}
.content {
display: inline-block;
height: 20px;
width: 200px;
background-color: green;
/* vertical-align: top; *//* this would fix it, but why? */
}
Update
I have put together a new fiddle. This should better illustrate my problem. How do I get rid of the green line below the textarea?
https://jsfiddle.net/cjqvcvL3/7/
<div class="content"><textarea>Some
Content</textarea></div>
.content {
display: inline-block;
background-color: green;
}
This happens because you specifically give width and height to the .content.
Have you considered using the :empty pseudo selector?
.content:empty {
display: none;
}
https://jsfiddle.net/cjqvcvL3/5/
Setting your the content display to block instead of inline-block fixes the problem.
.content {
display: block;
height: 20px;
width: 200px;
background-color: green;
/* vertical-align: top; *//* this fixes it */
}
This explains why setting vertical-align to top fixes the problem as well:
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.
Here is a working example: jsfiddle
To remove the gap, you have to surround the content div with a wrapper with font-size:0.
The reason is exained here: answer
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline
This value causes an element to generate one or more inline boxes.
The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-block element will be seen as atomic inline box and thus take up space.
.wrapper2 {
background-color: red;
margin-bottom: 20px;
font-size:0;
}
I need to set a margin to the top of an element. The text must be within the element and have a top margin of N pixels.
Here is what I want to achieve:
Fiddle: http://jsfiddle.net/GRQNh/
CSS:
body {
height: 960px;
}
.breadcrumbs {
position: relative;
background-color: #eee;
height: 10%;
}
.name {
color: #000;
margin-top: 50px;
}
Thanks.
DEMO or you may be try with padding-top instead margin-top as follows
.name {
display:block;
color: #000;
padding-top: 50px;
}
Since .breadcrumbs has position: relative, set position: absolute; to .name.
JSFiddle
You need to add display: inline-block; to get the margin to work.
For instance,
.name {
color: #000;
margin-top: 50px;
display: inline-block;
}
Hope this helps.
For it to work you will need to make the element behave like a block element. A block element can have, for instance, margins or paddings.
However, you will want to keep it from being displayed like an actual block element, so you will want to keep its visual displacement the same (that is, inline).
Luckily, there is a css value for display which does exactly what you need:
display: inline-block;
Add this to the span (which is inilne by default) and it will behave like a block element while it will still look like an inline element.
You can also give up on margins at all and use padding-top: 50px.
in this case, you must specify the parent ELEMENT position relative and absolute position subsidiary and specify top: 0;
the <span> is an inline element. That means you cant apply margin or padding to it.
For the solution to your problem you have -at least- two options.
1.Change the container of your text to a block element, like <div>
so:
<span class="name">Name</span>
will become
<div class="name">Name</div>
2.Change the behavior of your span by making it a block or inline-block element with this css:
.name {
display:inline-block
/* rest of your css */
These two articles will give you a good idea of what is inline and block
http://www.impressivewebs.com/difference-block-inline-css/
http://css-tricks.com/almanac/properties/d/display/
I have a sidebar with a set width and height. The problem is, it's supposed to be on the right but it takes up space on the left too like a block. However, I've set the display to inline but that doesn't seem to fix the problem. How can I make the div take up no space on the left?
Part of the CSS:
div#sidebar {
float: right;
width: 256px;
height: 500px;
display: inline;
clear: none;
}
JSFiddle for the whole page: http://www.jsfiddle.net/9tW2U
The width of either #sidebar or #mainbox is 3px to big to fit next to each other in #page. Take 3px of the width of #sidebar or #mainbox and it will fit.
By the way, display: inline doesn't have anything to do with it because you are allready using floats.
I have a problem concerning CSS and HTML.
I'm trying to wrap a DIV around another element (an UL in this case) and having it wrap around it and at the same time keeping both centered. As an added bonus I can't set a specific width since the width of the content inside the wrapping DIV have to be dynamic (since this is basically a template).
I've tried floating, and that works as far as wrapping goes, but then the thing ends up either to the right or to the left.
I'm going a bit crazy over this, and google is no help!
Thanks in advance!
UPDATE:
Sorry about not including code or images. This is what I'm trying to do illustrated with images:
One state of the UL width
Another state of the width
The wrapping DIV can't stretch the full width of the container. It has to wrap around the UL.
The dark grey is the DIV around the UL. I need the DIV to wrap around the UL (which has a horizontal layout) no matter the width of the content, since like I said above, the content of the UL is going to by different from time to time. The text in the LIs are going to change.
I also need it to be centered. I've made it work with float left and float right, but I need it to be centered.
This is the code I'm currently using for the container DIV and the UL and LI elements:
#container{
height: 100px;
width: 500px;
font-size: 14px;
color: #grey;
display: table-cell;
vertical-align: middle;
}
#container ul{
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#container li{
background: url(checkmark.png) center left no-repeat;
display: inline;
padding-left: 20px;
margin-right: 5px;
}
#container li:last-child{
margin-right: 0;
}
UPDATED
I got it. Is it this you were looking for?? http://jsfiddle.net/vZNLJ/20/
#wrapper {
background: #ccc;
margin: 0 auto; /* to make the div center align to the browser */
padding: 20px;
width: 500px; /* set it to anything */
text-align: center;
}
#wrapper ul {
background: #aaa;
padding: 10px;
display: inline-block;
}
#wrapper ul li {
color: #fff;
display: inline-block;
margin: 0 20px 0 0;
}
#wrapper ul li:last-child {
color: #fff;
display: inline-block;
margin: 0;
}
<div id="wrapper">
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
This is an old post, but what you can do now is:
<div style="display: flex; justify-content: center;">
<div style="display: inline-block;">
<input type="button" value="Example Button" />
</div>
</div>
The problem isn't wrapping the DIV around the content, but getting the content to state it's actual size, therefore pushing the DIV boundaries out. There are several things that need to be considered when tackling this issue. Not just from an existing UL or LI tag, but a DIV within a DIV.
I use custom tags to help describe layouts cleaner. Custom tags are DIV tags, thus their properties must be manipulated by CSS in order to get the proper behavior.
<layout-linear horizontal>
<control-label>Label 1</control-label>
<control-label>Label 2</control-label>
<control-label>Label 3</control-label>
<control-label>Label 4</control-label>
<control-label>Label 5</control-label>
</layout-linear>
This layout suggests that the contents .. the control-label(s) tags .. will be display in a horizontal row. To get the border for the layout-linear tag to wrap around the content of the control-label tags, there are several things to do:
layout-linear[horizontal]
{
display : block;
box-sizing: border-box;
border : 1px solid black;
padding : 1px 1px 1px 1px;
white-space: nowrap;
width : 100%;
clear : both;
text-align : center;
}
First, the box-sizing property must be set to border-box. This will force the linear-layout (DIV) tag to wrap around content. Padding, Border, Margin will insure that an empty DIV tag displays. Other tricks to make an empty DIV tag display are to use or :after { content:.; visibility: hidden; }.
If you don't want the control-label tags to wrap, adding white-space : nowrap.
I will discuss text-align when I discuss the float property of the control-label tag.
The next part requires the inner DIV tags (control-labels) to properly specify their box-sizing type and borders.
control-label
{
display : inline-block;
/* float : left; */
box-sizing: border-box;
border : 1px solid black;
margin : 5px 5px 5px 5px;
padding : 5px 5px 5px 5px;
}
Display : inline-block, causes the control-label tags to flow left to right. Display : Block, will cause the tags to stack up vertically.
Float is commented out specifically to draw your attention to the fact that float will cause the layout-linear tag shrink to its smallest box size, based on the margins, padding, and border.
To have the control-labels flow right to left, add text-align : right to the layout-linear tag. Or in this specific case, set text-align : center.
Again, box-sizing is used to tell the control-label (DIV) tag to wrap around it's content completely. Not just the text, but the edges of the box as drawn by the border, padding and margin settings.
This arrangement of CSS properties is what causes the outer and inner boxes to be rendered properly, or as expected.
Happy Coding.
You didn't supply code, but take a look at this fiddle I just setup, which might help:
http://jsfiddle.net/qXDJr/
Please let me know if I'm misunderstanding what you mean. Example code will always help for future reference.
This might help.
If you cant set the width you can just add align='center' in the div wrapping ul
<div align="center">
<ul>
<li>MenuItem</li>
<li>MenuItem</li>
<li>MenuItem</li>
</ul>
</div>