I want to give space between span and div which is as follow
<span class="headingUserName">JAVA MAN</span>
<div class="home-middle">
Content
</div>
in My external css file
.headingUserName{
font-size: 24px;
margin-bottom: 10px;
}
this is not providing space between div and span.How to resolve this.
try this
<style>
.headingUserName{
font-size: 24px;
}
.home-middle
{
margin-top: 10px;
}
</style>
Setting the display to block will surely do what you are looking for. But it also will make your span element to cover all the width, because block elements has by default a 100% width.
If you don't want this, you can use inline-block instead. Your element stays with an automatic width but you can set it to have margins as in block elements.
.headingUserName{
display: inline-block;
margin-bottom: 10px;
}
Add display: block to the span styling
DEMO http://jsfiddle.net/kevinPHPkevin/Ep8G8/
.headingUserName {
font-size: 24px;
margin-bottom: 10px;
display:block;
}
This should work
.home-middle
{
margin-top:10px;
}
JS Fiddle Demo
or as Vector's Solution
.headingUserName {
font-size: 24px;
margin-bottom: 10px;
display:block;
}
If you really wanted the Span to provide the spacing, for some reason, you would have to set its display property to block, like this:
.headingUserName{
font-size: 24px;
margin-bottom: 20px;
display: block;
Related
I'm switching divs from float:left to inline-block and don't know why some of the divs are displacing, like they have some invisible border or something.
Here are with float:left https://jsfiddle.net/f7op4dze/
div{
background-color: red;
width: calc(25% - 40px);
height: 50px;
float:left;
margin:0 20px;
}
And here with inline-block https://jsfiddle.net/dfdxa5hc/
div{
background-color: red;
width: calc(25% - 40px);
height: 50px;
display:inline-block;
margin:0 20px;
}
There's a space automatically added with inline elements and this space is applied to inline-block as well.
If there's no whitespace (either a space or a return) between the elements in your markup, the inline-block elements will be rendered without a space.
The easiest way to do this and still retain optimal formatting is using comment tags in between the <div> elements like so:
https://jsfiddle.net/orvn/wd0ynq98/2/
<section>
<div></div><!--
--><div></div><!--
--><div></div><!--
--><div></div>
</section>
As one possible option to fix the problem, set the font-size of the parent to 0.
section { font-size: 0; }
You can restore the font on the child elements:
div { font-size: 16px; }
Demo: https://jsfiddle.net/dfdxa5hc/3/
For an explanation and other possible solutions, see my answer here:
inline-block boxes not fitting in their container
There is (finally) a CSS only solution to this problem
section {
display: table;
word-spacing: -2em;
width: 100%;
}
div {
display: inline-block;
word-spacing: normal;
}
I have one of my <a> links set to inline-block and there is some space added to the bottom of the containing div. I am not sure how to get rid of this and was wondering if someone could help.
Here is a fiddle: http://jsfiddle.net/RQ69r/1/
Thanks in advance.
You can fix that adding the following style to the inline-block element:
vertical-align: middle;
Demo
Why dont you change it to display: block; ?
Check the updated fiddle:
http://jsfiddle.net/RQ69r/3/
When you want more <a> elements next to each other (horizontal), you could use list-items and / or float:left;
This is the default behavior of inline-block elements. Set the parent div font-size: 0px;
DEMO http://jsfiddle.net/RQ69r/7/
.row_20 {
width: 20%;
font-size: 0px;
}
And set the correct font-size of the child element
.header .logo {
font-size: 13px; <-- set font size
height: 45px;
width: 100%;
display: inline-block;
background: blue;
}
I have a Button that is a simple anchor tag styled with the following -
.buyBtn{
background:url(../images/buyBtn.png) no-repeat;
padding-top:4px;
width:97px;
height:28px;
margin-top:14px;
}
.buyBtn a{
color:#fff!important;
font-weight:normal!important;
text-decoration:none;
padding-left:27px;
padding-top:12px;
text-shadow:none!important;
}
I'm having problems vertically centering the text within the button, it appears fine in some devices, but off centre in others.
Can anybody recommend a way to fix this or a better solution to achieve the same result?
Cheers
Use line-height to center it vertically. I usually use the same value as its height.
HTML:
<div class="buyBtn">Button</div>
CSS:
.buyBtn{
background:url(../images/buyBtn.png) no-repeat;
width:97px;
height:28px;
display: table-cell;
vertical-align: middle;
}
.buyBtn a{
color:#fff!important;
font-weight:normal!important;
text-decoration:none;
padding-left:27px;
text-shadow:none!important;
}
No need to use padding-top or margin-top for vertical align. Just use display: table-cell; and vertical-align: middle;. Thats it.
Flexbox helped me nail it. Assume you have an excel button (an anchor tag, really).
HTML
<a class="btn-excel" href="/Export/ExportListToExcel">
Export To Excel
</a>
CSS
.btn-excel {
background-color: #32CD32; /*lime green*/
color: #fff;
outline: none;
border-radius: 0.3rem;
text-decoration: none;
width: 5rem;
height: 2.5rem;
/* Flex rules 'em all */
display: flex;
justify-content: center;
align-items: center;
}
.btn-excel:hover {
background-color: #808000; /*olive*/
cursor: pointer;
text-decoration: none;
}
I would use line-height as bchhun as mentioned. Also, padding-top & padding-bottom can help.
You can copy this code and put it as a CSS and adjust the things as you need
.btn-alignment{
width: 88px;
height: 40px;
margin: 0 auto;
padding: 0;
display: inline-block;
line-height: 40px;
margin-top: 9px;
text-align: center;
}
Did you try setting a font-size to your link ? Each browser probably has its own default size, so that may be an hint. Be careful too with padding and width/height, you need to decrease the block size if you add padding 'cause the padding is included in the width. For example, a simple block of 100px width without padding will have a size of 100px : ok. Add a padding-left: 10px; and your block now has a width of 110px. ;)
I have got a div id event_container and two div classes inside that div id by the class name create_event_button and search. I want to have a specific background for the event container and then style the classes differently.
Below is the css styling of these elements :-
#event_container{
background: red;
}
#event_container .create_event_button {
margin-left: auto;
margin-right: auto;
display: block;
float: right;
text-align: center;
width: 150px;
color: #1C1C1C;
background: #A9D0F5;
font-size: 150%;
font-weight: bold;
padding: 1em;
}
#event_container .search {
margin-left: auto;
margin-right: auto;
display: block;
float: left;
width: 480px;
background: #A9D0F5;
padding: 1.4em;
}
The inner div stylings are working all right but the #create_event is not giving me a proper background color.
I have been trying to hack around this one but have not got any success yet. It would be great if anyone could answer it.
Thanks,
The outer div contains only two floats, which are allowed to slip out of the parent div, unless you apply some clearfix trick ( there are many solutions: http://www.google.com/search?q=clearfix ), or simply use overflow:hidden; on the parent div to always contain any inner floats:
http://jsfiddle.net/E4J3Q/
the two inside divs are floated, so the outside div (#event_container) would not have a height.
you can append a <div class="clear"></div> and add a css rule like this: .clear {clear:both;}
jsfiddle: http://jsfiddle.net/ym9K9/
I tried to make a navigation inline list. You can find it here: http://www.luukratief-design.nl/dump/parallax/para.html
For some reason it does not display the width and height of the LI. Here is the snippet. What is wrong with this?
.navcontainer-top li {
font-family: "Verdana", sans-serif;
margin: 0;
padding: 0;
font-size: 1em;
text-align: center;
display: inline;
list-style-type: none;<br>
width: 117px;
height: 26px;
}
.navcontainer-top li a {
background: url("../images/nav-button.png") no-repeat;
color: #FFFFFF;
text-decoration: none;
width: 117px;
height: 26px;
margin-left: 2px;
margin-right: 2px;
}
.navcontainer-top li a:hover {
background: url("../images/nav-button-hover.png") no-repeat;
color: #dedede;
}
Declare the a element as display: inline-block and drop the width and height from the li element.
Alternatively, apply a float: left to the li element and use display: block on the a element. This is a bit more cross browser compatible, as display: inline-block is not supported in Firefox <= 2 for example.
The first method allows you to have a dynamically centered list if you give the ul element a width of 100% (so that it spans from left to right edge) and then apply text-align: center.
Use line-height to control the text's Y-position inside the element.
Inline items cannot have a width. You have to use display: block or display:inline-block, but the latter is not supported everywhere.
I think the problem is, that you're trying to set width to an inline element which I'm not sure is possible. In general Li is block and this would work.
Using width/height on inline elements is not always a good idea.
You can use display: inline-block instead
Remove the <br> from the .navcontainer-top li styles.
I had a similar issue trying to fix the item size to fit the background image width. This worked (at least with Firefox 35) for me :
.navcontainer-top li
{
display: inline-block;
background: url("../images/nav-button.png") no-repeat;
width: 117px;
height: 26px;
}