This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
Run the snippet below, and you will see that these two balck boxes occupy more space than they need (vertically). Why is that so? I have tried settting margin / padding to 0, but it did not work.
div.ex4 {
display: block;
background-color: lightblue;
overflow: visible;
}
.imag {
width: 20px;
height: 20px;
background-color: black;
display: inline-block;
margin: 0px;
padding: 0px;
}
<div class="ex4"><div class="imag"></div><div class="imag"></div></div>
use font-size: 0;
div.ex4 {
display: block;
background-color: lightblue;
overflow: visible;
font-size: 0;
}
.imag {
width: 20px;
height: 20px;
background-color: black;
display: inline-block;
margin: 0px;
padding: 0px;
}
<div class="ex4"><div class="imag"></div><div class="imag"></div></div>
Related
This question already has answers here:
Create line after text with css
(8 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 1 year ago.
I am trying to get a line through the a tag for decorative effect. The line should span the entire width but not go through content of the tag itself.
This is what I want,
This is what I've got so far.
a {
background: none;
}
a::after {
content: "";
border: 3px solid #000;
display: block;
position: relative;
top: -50%;
}
<a class="fw-bold" href="">Explore Services</a>
And here is the jsfiddle of the above code https://jsfiddle.net/68fkvhcw/
Why is the position relative with negative top margin not working?
This would be a possible way to do that. Wrap the a tag all around the elements, make that a flex container and use settings similar to those of my snippet below:
html,
body {
margin: 0;
}
a.link1:link,
a.link1:visited {
text-decoration: none;
font-size: 24px;
color: green;
}
.link1 {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
background: #dfd;
padding: 6px 10px;
}
.text1 {
flex-grow: 0;
display: inline-block;
}
.line {
height: 2px;
background: #fa0;
flex-grow: 1;
margin: 0 20px 0;
}
<a class="link1" href="#">
<div class="text1">Explore all Services</div>
<div class="line"></div>
</a>
I have created a code snippet as you want. But here is a suggestion that doesn't use styles directly on <a> tag else it will affect all your <a> tags on the page. So I have defined a style here .my_underline
You can adjust the thickness of the line and the color of the font.
.my_underline {
overflow: hidden;
text-decoration: none;
font-size: 2rem;
font-weight: bold;
color:aqua;
}
.my_underline:after {
content:"";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}
<a class="fw-bold my_underline" href="">Explore all Services</a>
Use theses styles ,
a {
color: #000000;
font-family: 'collegeregular';
font-size: 20px;
margin-left: 5px;
position: relative;
width: 93%;
}
a::after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
<a class="fw-bold" href="">Explore Services</a>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
My html has 2 sections, margin is zero but it still showing
.box1 {
width: 300px;
height: 450px;
background-color: green;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px;
}
.box2 {
width: 150px;
height: 300px;
background-color: purple;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px;
}
<body>
<div class="box2"></div>
<div class="box1"></div>
</body>
this is result
It is not the margin. It is the new lines converted to "spaces" when displaying it.It is because of the display:inline-block of the div . You can either remove the space or remove that with comments <!-- --> between the divs
.box1 { width: 300px;
height: 450px;
background-color: green;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px; }
.box2 { width: 150px;
height: 300px;
background-color: purple;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px;}
<div class="box2"></div><!--
--><div class="box1"></div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I'm running into this issue where there's a gap between two div tags. Here's my code -- I've tried to manually overwrite the margin/padding associated with the two divs and doesn't seem like it helps.
Here's what the CSS look like
.left_block{
display: inline-block;
background-color: blue;
width:40%;
height: 2em;
margin: 0px;
margin-right: 0px;
padding-right: 0px;
border-width: 0px;
overflow: hidden;
}
.right_block{
margin: 0px;
display: inline-block;
background-color: red;
width: 59%;
height: 2em;
margin-left: 0px;
padding-left: 0px;
border-width: 0px;
overflow: hidden;
}
Here's the HTML part
<div class="playground">
<div class = 'left_block'></div>
<div class = 'right_block'></div>
...
What am I missing?
What about using float property? Will it be a problem with your css?
.left_block {
display: inline-block;
background-color: blue;
width: 40%;
height: 2em;
margin: 0 auto;
padding: 0;
float: left;
}
.right_block {
display: inline-block;
background-color: red;
width: 60%;
height: 2em;
margin: 0 auto;
padding: 0;
overflow: hidden;
float: left;
}
<div class="playground">
<div class='left_block'></div>
<div class='right_block'></div>
</div>
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 7 years ago.
I'm trying to get everything centered horizontally but no go.I feel like it's because of the floats but if I remove them then the left_wrap and right_wrap don't sit beside each other.
https://jsfiddle.net/ydt17yvz/
.main_wrap {width:100%;}
.main_wrap_2 { position:relative;margin:0 auto;}
.left_wrap {background-color:#fff; width: 50%;
max-width: 930px; position:relative;float:left;}
.right_wrap {background-color:#fff; width: 50%;
max-width: 930px; margin-top:80vh;position:relative;float:left;}
You should use inline block, putting comment in the center of your 2 block (since else it'll count as a in your html document and will break the 50% 2 column layout)
Fiddle:
https://jsfiddle.net/dLgej4tx/3/
.main_wrap {
width: 100%;
}
.main_wrap_2 {
position: relative;
margin: 0 auto;
}
.left_wrap {
background-color: #fff;
display: inline-block;
width: 50%;
max-width: 930px;
position: relative;
vertical-align: top;
}
.right_wrap {
background-color: #fff;
display: inline-block;
width: 50%;
max-width: 930px;
margin-top: 80vh;
position: relative;
text-align: center;
vertical-align: top;
}
.carousel_wrap {
width: 92%;
margin-top: 80vh;
}
.content_wrap {
margin-top: 0px;
padding: 0;
position: relative;
clear: both;
}
.content {
margin: 0;
padding: 0;
font-family: 'Helvetica LT Std';
font-size: 12px;
line-height: 1.5;
width: 280px;
}
You will see, it'll make all your interaction easier and it will work as expected
This question already has answers here:
CSS Margin Collapsing
(2 answers)
Closed 7 years ago.
I have this code:
<div class='block'>
<div class='container'></div>
</div>
.block {
display: block;
height: 100px;
width: 100px;
background: black;
}
.container {
display: block;
width: 30px;
height: 30px;
background: red;
margin: 50px;
}
I can not understand why margin does not work inside the block?
JsFiddle: https://jsfiddle.net/39yy7a0q/
Try below css. I have added position to .container, and adjusted margin value as it should relevant to parents width. https://jsfiddle.net/39yy7a0q/4/
.block {
display: block;
height: 100px;
width: 100px;
background: black;
}
.container {
display: block;
position:absolute;
width: 30px;
height: 30px;
background: red;
margin: 35px;
}