The code below shows two links in the div with a small width.
<style>
div{
width: 89.5px;
border:1px solid #ddd;
}
a{
border:1px solid red;
display: inline;
margin-bottom:30px;
}
</style>
<div>
AAAAAAA
BBBBBBBB
</div>
Any ideas why margin-bottom:30px; doesn't work so that one button would be below another one for about 30px?
What's the best way to slightly modify this code so there is a gap between buttons?
And here is a jsFiddle if needed. Thank you.
Inline elements can't have margins.
If you need to add to link margin, you need to make this link block, or inline-block. You need the inline-block here.
a {display: inline-block}
When you set there block, margin will be apllied and link width will be 100% (or better, 100% - side margins - paddings - borders).
Note: you set display: inline, which do nothing in this case. Links are inline by default.
I see the issue and it is because you are using display:inline as opposed to display:block.
a{
border:1px solid red;
display: block;
margin-bottom:30px;
}
Related
I am trying to integrate the box-sizing but seems not working. any one help me to understand the issue here..
Live Demo
a{
display:inline-block;
background:#fff;
border:1px solid #ccc;
box-sizing:border-box;
padding:1rem;
}
a.active{
border:0;
background:orange;
}
<a class="active" href="#">EN</a>FR
There are two main problems in the code: first, as #Daniel pointed out in his answer, the dimensions of the element must be made explicit so as to prevent automatic resizing. Additionally, as noted in this answer, inline-block elements conflict with border-box sizing, but there are several workarounds.
For one, the CSS attribute overflow: hidden can also be added to the element in question. Alternatively, it is possible to use vertical-align: top to ensure all elements have the same baseline. A functional example can be seen below, with a larger border for emphasis:
a{
display:inline-block;
background:#fff;
border:10px solid #ccc;
box-sizing:border-box;
width:5em;
height:5em;
overflow:hidden;
padding:1rem;
}
a.active{
border:0;
background:orange;
}
<a class="active" href="#">EN</a>FR
You need to explicitly set the value of the dimension that you want the browser to use the border-box calculation for.
As per the spec in reference to the border-box value:
The content width and height are calculated by subtracting the border
and padding widths of the respective sides from the specified
. As the content width and height cannot be
negative, this computation is floored at zero.
So set the width and/or height property for your a elements and then the padding/border will be subtracted from this.
box-sizing: border-box; values for elements without specified width or height dimensions are ignored.
a{
display: inline-block;
background: #fff;
border:1px solid #ccc;
box-sizing: border-box;
padding:1rem;
}
a.active{
border: 1px solid transparent;
background: orange;
}
<a class="active" href="#">EN</a>FR
I've run into the same issue and think I've found much simpler solution. Instead of removing the border completely just change its color for transparent. That way it is still there even though it's not visible. Thanks to that text inside anchor tag won't jump here and forth.
I have used three div's with css styling as display inline block with some specific width and height. The Div which as some text is pushing down. Can anybody tell me what could be the reason ? below is the code
Html:
<div></div>
<div>why this pushed down?</div>
<div></div>
Css :
div{
display:inline-block;
width:50px;
height:150px;
padding: 5px;
background: #f00;
}
http://jsfiddle.net/P5HGJ/
Each element behaves like a block element, but it remains inline.
You can change the vertical alignment with vertical-align: middle.
.show-inline{
display:inline-block;
width:50px;
height:150px;
padding: 5px;
background: #f00;
vertical-align: middle;
}
See http://jsfiddle.net/7y7Hd/1/
Read about vertical-align at https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
This has to do with the baseline. Whenever you use an inline-block the baseline is calculated on the line-height of the font.
Because the outer <div>s don't have any font the baseline will not have the same calculation/position as the one with the font.
You can simply fix this by giving a global baseline on all the <divs>:
div{
display:inline-block;
width:50px;
height:150px;
padding: 5px;
background: #f00;
vertical-align: middle;
}
It doesn't really matter if you use top, middle, or bottom. As long as the baseline is on all the <div>s the same, it should be no problem
jsFiddle
inline-block makes the element generate a block box that’s laid out as
if it were an inline box.
inline block is placed inline (ie. on the same line as adjacent content),
but it behaves as a block.
for some reason
the width of the div is 100% and if i set it to auto, nothing changes. tried display: block; and still nothing.
what I have in
index.html
.box {
border: 1px solid #555;
display: block;
width: auto;
}
<head>
<title>project x</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class='box'>This is a box</div>
<div class='box'>This is another box</div>
</body>
I enjoy cracking problems but this one crack me.
Edit
I want the div to take the width of the words. I don't want it to be 100%.
adding to Explosion Pills answer now that its clear what you want, this css should work.
.box {
border: 1px solid #555;
display: inline-block;
float:left;
clear:both;
}
Alternatively, you could place some <br> tags after each <div> block
Width display: block, the elements will always use as much width as is available. It seems like you want to use display: inline-block
http://jsfiddle.net/HpMSU/
width:auto on a DIV expands it to fill it's parent, not to be sized by it's children.
ex: http://jsfiddle.net/nTWvr/
To size a DIV by it's content, there are a few methods: How to make div not larger than its contents?
The following options can change the behavior of width: auto from using the available container width to so called shrink-to-fit algorithm:
Float:left/right
Position: absolute
Display: inline-block
Display: inline-table
Display: table
Display: table-cell
Assuming you need that the blocks to stay in the block formatting context of the normal flow (i.e. to go one after another vertically as usually, just have the width of their content), I suppose that in this case display: table will be the best solution.
use display: inline-block
and add a class
.clear { clear:both;}
place it in between the boxes
so
http://jsfiddle.net/HpMSU/1/
Setting width:auto; is close to the same as setting width:100%; (the only real difference is that they handle margin and padding differently).
Also, div objects are by default block elements, so setting display:block; won't change their behavior.
You said you want the div to take up the width of the words. To do that you can either set display:table-cell (which is not very IE friendly) or you can float the div and it will snap to fit the contents inside.
.box { float:left; }
Make sure to properly clear your float after the div to avoid breaking the layout of contents below it.
.clear { clear:both; height:0px; }
<div class="clear"></div>
I know this question doesn't mention centering the element, but that's what I was looking for when I was directed here.
display: inline-block does its job in terms of width, but doesn't work if you also want to center the block. You can add text-align: center to the parent, but then you would have to override this property for all other elements inside you don't want centered.
div {
border: 1px solid #aaa;
padding: 1rem;
display: inline-block;
margin: 0 auto; // doesn't work with inline-block
}
<div>Content</div>
To handle it properly just for this element you need display: table:
div {
border: 1px solid #aaa;
padding: 1rem;
display: table;
margin: 0 auto;
}
<div>Content</div>
I think you want this result:
<head>
<title>project x</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<span class='box'>This is a box</span>
<span class='box'>This is another box</span>
</body>
.box {
border: 1px solid #555;
}
I just changed div to span! try to use proper HTML tags!
I have two elements on the same line floated left and floated right.
<style type="text/css">
#element1 {float:left;}
#element2 {float:right;}
</style>
<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>
I need for element2 to line up next to element1 with about 10 pixels of padding between the two. The problem is that element2's width can change depending on content and browser (font size, etc.) so it's not always lined up perfectly with element1 (I can't just apply a margin-right and move it over).
I also cannot change the markup.
Is there a uniform way to line them up? I tried margin-right with a percentage, I tried a negative margin on element1 to bring element2 closer (but couldn't get it to work).
Using display:inline-block
#element1 {display:inline-block;margin-right:10px;}
#element2 {display:inline-block;}
Example
div {
display: flex;
justify-content: space-between;
}
<div>
<p>Item one</p>
<a>Item two</a>
</div>
#element1 {float:left;}
#element2 {padding-left : 20px; float:left;}
fiddle : http://jsfiddle.net/sKqZJ/
or
#element1 {float:left;}
#element2 {margin-left : 20px;float:left;}
fiddle : http://jsfiddle.net/sKqZJ/1/
or
#element1 {padding-right : 20px; float:left;}
#element2 {float:left;}
fiddle : http://jsfiddle.net/sKqZJ/2/
or
#element1 {margin-right : 20px; float:left;}
#element2 {float:left;}
fiddle : http://jsfiddle.net/sKqZJ/3/
reference : The Difference Between CSS Margins and Padding
By using display: inline-block; And more generally when you have a parent (always there is a parent except for html) use display: inline-block; for the inner elements. and to force them to stay in the same line even when the window get shrunk (contracted). Add for the parent the two property:
white-space: nowrap;
overflow-x: auto;
here a more formatted example to make it clear:
.parent {
white-space: nowrap;
overflow-x: auto;
}
.children {
display: inline-block;
margin-left: 20px;
}
For this example particularly, you can apply the above as fellow (i'm supposing the parent is body. if not you put the right parent), you can also like change the html and add a parent for them if it's possible.
body { /*body may pose problem depend on you context, there is no better then have a specific parent*/
white-space: nowrap;
overflow-x: auto;
}
#element1, #element2{ /*you can like put each one separately, if the margin for the first element is not wanted*/
display: inline-block;
margin-left: 10px;
}
keep in mind that white-space: nowrap; and overlow-x: auto; is what you need to force them to be in one line. white-space: nowrap; disable wrapping. And overlow-x:auto; to activate scrolling, when the element get over the frame limit.
Change your css as below
#element1 {float:left;margin-right:10px;}
#element2 {float:left;}
Here is the JSFiddle http://jsfiddle.net/a4aME/
In cases where I use floated elements like that, I usually need to be sure that the container element will always be big enough for the widths of both floated elements plus the desired margin to all fit inside of it. The easiest way to do that is obviously to give both inner elements fixed widths that will fit correctly inside of the outer element like this:
#container {width: 960px;}
#element1 {float:left; width:745px; margin-right:15px;}
#element2 {float:right; width:200px;}
If you can't do that because this is a scaling width layout, another option is to have every set of dimensions be percentages like:
#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:20%;}
This gets tricky where you need something like this:
#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:200px;}
In cases like that, I find that sometimes the best option is to not use floats, and use relative/absolute positioning to get the same effect like this:
#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */
#element1 {margin-right:215px;}
#element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;}
While this isn't a floated solution, it does result in side by side columns where they are the same height, and one can remain fluid with while the other has a static width.
The modern answer is definitely display:flex, although I've found that space-around generally tends to gives me better results than space-between:
.container {
display: flex;
justify-content: space-around
}
<!DOCTYPE html>
<html>
<body>
<div class='container'>
<h1>hi</h1>
<h1>bye</h1>
</div>
</body>
</html>
This is what I used for similar type of use case as yours.
<style type="text/css">
#element1 {display:inline-block; width:45%; padding:10px}
#element2 {display:inline-block; width:45%; padding:10px}
</style>
<div id="element1">
element 1 markup
</div>
<div id="element2">
element 2 markup
</div>
Adjust your width and padding as per your requirement.
Note - Do not exceed 'width' more than 100% altogether (ele1_width+ ele2_width) to add 'padding', keep it less than 100%.
I have two button bars- each contains links, but one also contains a submit button of a certain height. The one with the submit button has all the elements vertically centered. I want the other button bar, without the submit button, to look the same, so I gave it an explicit height. However, the links within it align to the top instead of in the middle.
What's going on here, and how can I make link bars that are of a consistent height, with vertically centered elements?
HTML:
<div class="link-bar">
<input type="submit" value="Save"/>
link
link
</div>
<div class="link-bar">
link
link
</div>
CSS:
input[type='submit'] {
width:100px;
height:40px;
border:solid red 1px;
}
.link-bar {
height:40px;
background:#EEE;
border:blue 1px solid;
margin:10px;
vertical-align: middle;
}
See jsFiddle for example
Simply add line-height equal to the height. By default, any text on that line will be vertically centered. The exception occurs if you wrap the text to a new line.
http://www.w3.org/wiki/CSS/Properties/line-height
I also removed your vertical-align as it's superfluous to content in block level elements. It only applies to inline elements.
.link-bar {
height: 40px;
background: #EEE;
border:blue 1px solid;
margin: 10px;
}
.link-bar a {
line-height: 40px; /* equal to the height of the container */
}
DEMO:
http://jsfiddle.net/SLqbk/9/
Use the line-height property.
.link-bar a {
line-height: 40px;
}
http://jsfiddle.net/SLqbk/7/
Add this to your css
.link-bar a {line-height: 40px; }
http://jsfiddle.net/xYVRj/
I gave #Sparky672 the answer because he correctly addressed my specific question and led me on the right path, but I want to share what I ended up doing, which I think is more effective overall:
Instead of explicitly setting the line-height of .link-bar a to try to match up to the container and button heights, I just set ALL the elements in the toolbar to the same line-height, and make them display:inline-bock. While the normal caveats of using inline-block apply (See here and here), the end result is consistent sizing and vertical centering for all the elements you throw in your toolbar, with less css to manage:
.link-bar * {
line-height: 30px;
display:inline-block;
/* Keep top-bottom padding of elements zeroed for consistent heights: */
padding-top:0; padding-bottom:0;
}
See the updated fiddle.