I have a footer div with inner span buttons.
Each button have margin-right: 20px and the .footer element has padding: 0 13px.
I want to prevent the margin-right of the most right button by setting negative margin-right to its parent.
How could I get it with margin-right?
.footer {
border: 2px solid blue;
padding: 0 13px;
width: 120px;
text-align: right;
background-color: yellow;
}
.btn {
border: 1px solid black;
margin-right: 20px;
background-color: red;
}
<div class="footer">
<span class="btn">Btn1</span>
<span class="btn">Btn2</span>
</div>
I am not looking for a solution with the last child CSS pseudo-class.
You need to add another container child of .footer and apply a negative margin-right to that element. This approach is also described here:
.footer {
border: 2px solid blue;
padding: 0 13px;
text-align: right;
background-color: yellow;
overflow:hidden;
}
.footer > div {
margin-right:-33px;
}
.btn {
border: 1px solid black;
margin-right: 20px;
background-color: red;
}
<div class="footer">
<div>
<span class="btn">Btn1</span>
<span class="btn">Btn2</span>
</div>
</div>
Note you also need to a d overflow:hidden; to the .footer element to prevent horizontal scrollbar.
Related
Im having an issue where my background color for a child element is going past my parent elements borders. How could I remedy this?
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
Edit: I should mention I tried adding the same border radius only to the top of banner but this then left a small gap of white space between the color and the border of the parent.
overflow:hidden will prevent the inner child elements from extending beyond the bounds of the parent.
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
overflow:hidden;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
Apart from using overflow: hidden, it's also possible to use contain: content, which tells other elements that the child elements inside that particular element will never affect other elements, and will also never be displayed outside the parent element.
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
/* ADDED */
contain: content;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
In the following code when i specify margin-top for #thirdDiv, It doesn't work until i give it 36px.
What is the reason?
#Container {
border: 15px solid orange;
width: 350px;
}
#firstDiv {
display: inline-block;
border: 1px solid red;
font-size: 1em;
}
#secondDiv {
border: 1px solid green;
display: inline-block;
font-size: 2em;
}
#thirdDiv {
display: inline-block;
border: 1px solid pink;
font-size: 1em;
margin-top: 36px;
}
<div id="Container">
<div id="firstDiv"> a </div>
<div id="secondDiv"> b </div>
<div id="thirdDiv"> c </div>
</div>
Because the child elements of your Container element are based on the bottom of that div. If you add vertical-align: top to your child elements, any margin-top is possible. You can try it out in this CodePen where I copied you code and tidied the CSS up a bit. Note that you can choose to only put vertical-align: top in your #thirdDiv element. This way you can keep the other two divs in their original position.
What you are looking for is padding. The CSS margin properties are used to create space around elements, outside of any defined borders whereas the CSS padding properties are used to generate space around an element's content, inside of any defined borders.
Try the following instead of applying margin-top to #thirdDiv.
#Container {
padding-top: 36px;
border: 15px solid orange;
width: 350px;
}
#firstDiv {
display: inline-block;
border: 1px solid red;
font-size: 1em;
}
#secondDiv {
border: 1px solid green;
display: inline-block;
font-size: 2em;
}
#thirdDiv {
display: inline-block;
border: 1px solid pink;
font-size: 1em;
}
<div id="Container">
<div id="firstDiv"> a </div>
<div id="secondDiv"> b </div>
<div id="thirdDiv"> c </div>
</div>
You must specify a value for margin-top else it won't know how much margin to add.
What were typing for margin-top before, margin-top: ;?
What is your desired effect?
why the border of the span is next to top? if I delete the display of span, it works.
thank you.
div {
height: 80px;
border: 1px solid green;
line-height: 80px
}
.inner-span {
height: 20px;
display: inline-block;
border: 1px solid red;
}
<div>
<span class="inner-span">123123</span>
</div>
As other explained in the comments, the issue is that you have a fixed height of 20px and you set a line-height that get inherited from the parent to 80px so the line-box height is bigger thus you are having an overflow.
If you change the line-height of the inner span it will get fixed:
div {
height: 80px;
border: 1px solid green;
line-height: 80px
}
.inner-span {
height: 20px;
line-height: initial;
display: inline-block;
border: 1px solid red;
}
<div>
<span class="inner-span">123123</span>
</div>
Now why the border is positionned on the top?
It's because the default alignment is baseline and to define the baseline we consider the text.
Aligns the baseline of the element with the baseline of its parentref
If you change the vertical-align to be bottom, for example, you will see that the border will be on the bottom.
Aligns the bottom of the element and its descendants with the bottom
of the entire line.ref
div {
height: 80px;
border: 1px solid green;
line-height: 80px
}
.inner-span {
height: 20px;
display: inline-block;
vertical-align:bottom;
border: 1px solid red;
}
<div>
<span class="inner-span">123123</span>
</div>
If you add overflow:auto will clearly understand the overflow issue and you will also change the baseline of the element to make it the bottom border:
div {
height: 80px;
border: 1px solid green;
line-height: 80px
}
.inner-span {
height: 20px;
display: inline-block;
overflow:auto;
border: 1px solid red;
}
<div>
<span class="inner-span">123123</span>
</div>
If you remove the fixed height you will also notice that the height of the element will get defined by the line-height (the height of the line-box) and will logically be 80px:
div {
height: 80px;
border: 1px solid green;
line-height: 80px
}
.inner-span {
display: inline-block;
border: 1px solid red;
}
<div>
<span class="inner-span">123123</span>
</div>
The following vertically centers the inner div
HTML
<button class="outer">
<div class="inner">
Hello<br>World
</div>
</button>
CSS
.outer {
position: absolute;
top: 25%;
left: 25%;
bottom: 25%;
right: 25%;
padding: 0;
background: none;
border: none;
outline: dashed 1px black;
font-family: sans-serif;
font-size: 16px;
text-align: center;
}
.inner {
background: #ccc;
}
JSFiddle
But if I use a div instead of a button for the outer element,
For semantic reasons, I want a div not a button.
What CSS styles do I need to add to the .outer class to produce the same vertical-alignment styling that the button had?
I need this to work in Chrome and FF.
This is What you need: Link: http://jsfiddle.net/WP8um/2/
OR If you don't want margin on outer div you can use top,left,bottom,right properties. http://jsfiddle.net/WP8um/3/
CSS
.outer {
display: inline;
margin:25%;
background: none;
outline: dashed 1px black;
border: none;
padding: 0;
width: 200px;
height:200px;
}
.inner {
background: #ccc;
text-align:center;
margin: 50% 0;
}
here's the code:
[...]
<style>
.hex {
float: left;
background-color: transparent;}
.top, .bottom {
width: 0;
border-left: 2.2em solid transparent;
border-right: 2.2em solid transparent;}
.bottom{border-top: 1.25em solid #6C6;}
.top{border-bottom: 1.25em solid #6C6;}
.middle{
width: 1.46em;
height: 0.8em;
background: #6C6;
text-align: center;
font-size: 3em;
line-height: 1em;
margin: 0 auto;
border: 1px solid red;}
.hex .middle input{
color: black;
text-align: center;
background: transparent;
border: 1px solid;
width:5em;}
</style>
[...]
<body>
<div class="hex">
<div class="top"></div>
<div class="middle">
<input type="text" class="playerName" id="name1" maxlength="7" value="what" disabled/>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
full example - http://jsbin.com/iqanoh/1
could someone please explain me, why can't I control position of textbox(black) inside the div(red). It does not react for any: margin or padding changes. Generally I'd like to center (horizontally and vertically), but it's always on bottom even a little bit under.
You need to set display: block to the input to make margin take effect. By default input has display: inline and it wont work with margin.
there is a problem in the .middle div
.middle {
background: none repeat scroll 0 0 #66CC66;
border: 1px solid red;
font-size: 3em;
height: 0.8em;
line-height: 1em;
margin: 0 auto;
text-align: center;
width: 1.46em;
}
remove font-size, line-height and width from it.
hope this will solve your issue.