Rendered div height different when margin and height value different
up vote
0
down vote
favorite
I am trying to create a stack of lines using divs. What seems to be a relatively simple task has left me boggled because the rendered height of the divs are not the same while they are given the same height in css. Funny thing is, if the margin-bottom value is the same as the div height, div heights renders correctly. But, I want the margin to be twice that of the div height. Here is my code.
.line-wrap{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 400px;
}
.line{
background: rgb(0,0,0);
/* display: inline-block; */
/* display: flex; */
height: 2px;
width: 100%;
/* box-sizing: border-box; */
/*margin-bottom: 2px;*/
margin-bottom: 4px;
}<div class="line-wrap">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>I've tried different suggestions from different SO posts but nothing seems to work. What's happening here? What am I doing wrong? Thanks in advance for the help.
html css height margin
asked Nov 11 at 8:39
Antonio
63
add a comment |
up vote
0
down vote
favorite
I am trying to create a stack of lines using divs. What seems to be a relatively simple task has left me boggled because the rendered height of the divs are not the same while they are given the same height in css. Funny thing is, if the margin-bottom value is the same as the div height, div heights renders correctly. But, I want the margin to be twice that of the div height. Here is my code.
.line-wrap{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 400px;
}
.line{
background: rgb(0,0,0);
/* display: inline-block; */
/* display: flex; */
height: 2px;
width: 100%;
/* box-sizing: border-box; */
/*margin-bottom: 2px;*/
margin-bottom: 4px;
}<div class="line-wrap">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>I've tried different suggestions from different SO posts but nothing seems to work. What's happening here? What am I doing wrong? Thanks in advance for the help.
html css height margin
asked Nov 11 at 8:39
Antonio
63
I'm not sure I understand the problem. I see six parallel lines of equal height, in Firefox and Chrome. What browser are you using? Can you include a screenshot? Here is mine: tarm.wdfiles.com/local--files/stack-overflow-files/lines.png
– Auroratide
Nov 11 at 9:00
funny stuff. I'm using chrome 70.0.3 & firefox 63.0.1 Tested with edge as well. Here is my screenshot. [ibb.co/n5TCYV]
– Antonio
Nov 11 at 14:32
New link pasteboard.co/HMGvxz8.png
– Antonio
Nov 11 at 14:52
@Antonio in this case, check if there is any zoom active
– Temani Afif
Nov 11 at 14:53
Nah, everything is normal.
– Antonio
Nov 11 at 14:58
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am trying to create a stack of lines using divs. What seems to be a relatively simple task has left me boggled because the rendered height of the divs are not the same while they are given the same height in css. Funny thing is, if the margin-bottom value is the same as the div height, div heights renders correctly. But, I want the margin to be twice that of the div height. Here is my code.
.line-wrap{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 400px;
}
.line{
background: rgb(0,0,0);
/* display: inline-block; */
/* display: flex; */
height: 2px;
width: 100%;
/* box-sizing: border-box; */
/*margin-bottom: 2px;*/
margin-bottom: 4px;
}<div class="line-wrap">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>I've tried different suggestions from different SO posts but nothing seems to work. What's happening here? What am I doing wrong? Thanks in advance for the help.
html css height margin
asked Nov 11 at 8:39
Antonio
63
I am trying to create a stack of lines using divs. What seems to be a relatively simple task has left me boggled because the rendered height of the divs are not the same while they are given the same height in css. Funny thing is, if the margin-bottom value is the same as the div height, div heights renders correctly. But, I want the margin to be twice that of the div height. Here is my code.
.line-wrap{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 400px;
}
.line{
background: rgb(0,0,0);
/* display: inline-block; */
/* display: flex; */
height: 2px;
width: 100%;
/* box-sizing: border-box; */
/*margin-bottom: 2px;*/
margin-bottom: 4px;
}<div class="line-wrap">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>I've tried different suggestions from different SO posts but nothing seems to work. What's happening here? What am I doing wrong? Thanks in advance for the help.
.line-wrap{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 400px;
}
.line{
background: rgb(0,0,0);
/* display: inline-block; */
/* display: flex; */
height: 2px;
width: 100%;
/* box-sizing: border-box; */
/*margin-bottom: 2px;*/
margin-bottom: 4px;
}<div class="line-wrap">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>.line-wrap{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 400px;
}
.line{
background: rgb(0,0,0);
/* display: inline-block; */
/* display: flex; */
height: 2px;
width: 100%;
/* box-sizing: border-box; */
/*margin-bottom: 2px;*/
margin-bottom: 4px;
}<div class="line-wrap">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>html css height margin
html css height margin
asked Nov 11 at 8:39
Antonio
63
asked Nov 11 at 8:39
Antonio
63
asked Nov 11 at 8:39
Antonio
63
asked Nov 11 at 8:39
Antonio
63
asked Nov 11 at 8:39
Antonio
63
63
I'm not sure I understand the problem. I see six parallel lines of equal height, in Firefox and Chrome. What browser are you using? Can you include a screenshot? Here is mine: tarm.wdfiles.com/local--files/stack-overflow-files/lines.png
– Auroratide
Nov 11 at 9:00
funny stuff. I'm using chrome 70.0.3 & firefox 63.0.1 Tested with edge as well. Here is my screenshot. [ibb.co/n5TCYV]
– Antonio
Nov 11 at 14:32
New link pasteboard.co/HMGvxz8.png
– Antonio
Nov 11 at 14:52
@Antonio in this case, check if there is any zoom active
– Temani Afif
Nov 11 at 14:53
Nah, everything is normal.
– Antonio
Nov 11 at 14:58
add a comment |
I'm not sure I understand the problem. I see six parallel lines of equal height, in Firefox and Chrome. What browser are you using? Can you include a screenshot? Here is mine: tarm.wdfiles.com/local--files/stack-overflow-files/lines.png
– Auroratide
Nov 11 at 9:00
funny stuff. I'm using chrome 70.0.3 & firefox 63.0.1 Tested with edge as well. Here is my screenshot. [ibb.co/n5TCYV]
– Antonio
Nov 11 at 14:32
New link pasteboard.co/HMGvxz8.png
– Antonio
Nov 11 at 14:52
@Antonio in this case, check if there is any zoom active
– Temani Afif
Nov 11 at 14:53
Nah, everything is normal.
– Antonio
Nov 11 at 14:58
I'm not sure I understand the problem. I see six parallel lines of equal height, in Firefox and Chrome. What browser are you using? Can you include a screenshot? Here is mine: tarm.wdfiles.com/local--files/stack-overflow-files/lines.png
– Auroratide
Nov 11 at 9:00
I'm not sure I understand the problem. I see six parallel lines of equal height, in Firefox and Chrome. What browser are you using? Can you include a screenshot? Here is mine: tarm.wdfiles.com/local--files/stack-overflow-files/lines.png
– Auroratide
Nov 11 at 9:00
funny stuff. I'm using chrome 70.0.3 & firefox 63.0.1 Tested with edge as well. Here is my screenshot. [ibb.co/n5TCYV]
– Antonio
Nov 11 at 14:32
funny stuff. I'm using chrome 70.0.3 & firefox 63.0.1 Tested with edge as well. Here is my screenshot. [ibb.co/n5TCYV]
– Antonio
Nov 11 at 14:32
New link pasteboard.co/HMGvxz8.png
– Antonio
Nov 11 at 14:52
New link pasteboard.co/HMGvxz8.png
– Antonio
Nov 11 at 14:52
@Antonio in this case, check if there is any zoom active
– Temani Afif
Nov 11 at 14:53
@Antonio in this case, check if there is any zoom active
– Temani Afif
Nov 11 at 14:53
Nah, everything is normal.
– Antonio
Nov 11 at 14:58
Nah, everything is normal.
– Antonio
Nov 11 at 14:58
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247087%2frendered-div-height-different-when-margin-and-height-value-different%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I'm not sure I understand the problem. I see six parallel lines of equal height, in Firefox and Chrome. What browser are you using? Can you include a screenshot? Here is mine: tarm.wdfiles.com/local--files/stack-overflow-files/lines.png
– Auroratide
Nov 11 at 9:00
funny stuff. I'm using chrome 70.0.3 & firefox 63.0.1 Tested with edge as well. Here is my screenshot. [ibb.co/n5TCYV]
– Antonio
Nov 11 at 14:32
New link pasteboard.co/HMGvxz8.png
– Antonio
Nov 11 at 14:52
@Antonio in this case, check if there is any zoom active
– Temani Afif
Nov 11 at 14:53
Nah, everything is normal.
– Antonio
Nov 11 at 14:58