When using a <button> inside a <div>, I've noticed if the button is left with no text, an unexpected white space appears below it.
The fiddle here shows it: https://jsfiddle.net/042pt648/ If you comment out the empty button and try the others, they work fine without a white space below. Upon investigation, it seems the height of the parent div with class .post-comments is different when the button is empty. When the white space is visible, the parent div has a height of 25px while the button has a height of 20px, causing the space. In the other cases, the height is the same as the button(20px) just as expected.
Could someone explain what is causing this?
Here is the snippet in question:
.post-comments {
border: 1px solid blue;
}
.comment-div-toggle {
width: 100%;
height: 20px;
border: none;
margin: 0;
padding: 0;
background-color: gray;
color: white;
}
<div class="post-comments">
<button class="comment-div-toggle"></button>
</div>
By default <button> is an inline level element. Try this to get rid of the whitespace:
button {
display: block;
}
Or:
button {
vertical-align: top;
}
Related
i have this button where if i give width="140px" and content is big it goes outside div.
i want content to auto fit to given div.
i tried lot but nothing working,
<div id="pushdaddy-button" class="pushdaddy-button" style="width:140px;height:30px;border-radius: 8px;bottom: 20px;right:2%; ; ;background-size: auto;background-position: center;background-repeat: no-repeat; ; ; ;;"><div class="pushdaddy-button-label" id="pushdaddy-button-label" style="color:#F2CA80; ;margin:0 34px;padding:4px 4px; ;; ; right: unset; background-color: transparent;color: #F2CA80;box-shadow:none; font-size: 16px; ">Chat with us 976654654444</div></div>
content is Chat with us 976654654444
and chat with us fits in 140 px but when we add some more text it goes outside of div which looks ugly
any help in solving this issue so that text always fits in div will be great.
i tried
display:inline-block
width:auto
and several other combination but nothing worked
here is screenshot how it looks
i want it to be fit in div. 140px is not the constraint. i want text to fit in whatever width it takes. but should be in one line. not in multiline
You're almost there with display: inline-block, but as you can see, allowing the button to determine its own width makes supporting arbitrary labels difficult.
.btn {
display: inline-block;
width: 140px;
border-radius: 10px;
}
.btn-primary {
background-color: purple;
color: white;
}
<div class="btn btn-primary">Chat with us 976654654444</div>
Instead, you can remove the width and let the label decide how wide the button should be. Here I've used padding to place some space around the width of the text.
.btn {
display: inline-block;
padding: 10px;
border-radius: 10px;
}
.btn-primary {
background-color: purple;
color: white;
}
<div class="btn btn-primary">Chat with us 976654654444</div>
You can still support widths with this approach, but you should switch to max-width and make sure it's only used when you need to prevent the button from taking up all the room in your template.
Here I've added a max-width to keep the button at 200px or below, but I have also had to add:
overflow: hidden to prevent the text from flowing out of the button
white-space: nowrap to prevent the text from forming multiple lines
text-overflow: ellipsis to prevent the text from being cut off by the end of the button
.btn {
display: inline-block;
padding: 10px;
max-width: 200px;
border-radius: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-primary {
background-color: purple;
color: white;
}
<div class="btn btn-primary">The label for this button is too long and would intrude on other parts of the template</div>
I'm struggling with this problem:enter image description here
I want the border padding of my header to be 1px left and right but although i put that in css file the border still takes all the screen horizontally...
I want my border to fit the text,not be expanded in that way.Thx if you can help.This is the html for h1:<h1 title="they kidnapped me">Doing some testing here</h1><hr>
H1 is by default a block element which takes up the whole line. Make it inline and it only takes up what space the text takes.
body {
color: white;
background-color: #192e51;
}
.testing {
border: 1px double white;
border-radius: 100px;
display: inline;
}
.content {
text-align: center;
}
<div class="content">
<h1 class="testing"> Doing some testing here </h1>
</div>
I am attempting to wrap a CSS table ( div, class of myTable, display:table) inside a div (class of index and display:block) but am having an issue with Chrome. Chrome is adding about one pixel's worth of padding between the wrapper and the table it is containing. This does not occur in Edge, Safari or Firefox.
What is odd is that Chrome only adds this padding:
on the right side, and
and random widths.
You can see it below, or in this codepen: http://codepen.io/ihatecoding/pen/xgRXMZ
No Weird Padding: the right hand border is truly red:
Weird Padding: The right hand side adds padding, appearing purple due to background color of blue:
The blue padding is visible in this zoomed image:
If you adjust your browser windows to different widths you will see that at some widths it is fine, with no added padding, and at others the weird padding appears on the right, you'll see the right edge turn purple.
But this change is hard to see.This purple that appears on the rigth is not a true purple, but only appears as purple. The background color inside the container is blue, and at only one pixel the eye mixes it with the red border of the containing div. You can verify this if you change the background-color of containing div (.index) in the CSS to any color you want.
Please do not suggest I remove the table and just display the two as table-cells. This would work if I only had one table, but actually I have a bunch of tables I am stacking vertically inside this wrapper. It is important that I keep the wrapper for both cells as (display: table), because I actually have other rows that are in this container that I am also displaying as tables. If I display them all as table-cell, all of my rows end up on the same line, which is not what I want.
I have recognized that this problem occurs even if there is only one table, as you can see in my example, it is not the product of stacking tables inside a div.
Can any of you help me to get Chrome to behave and stop adding that weird padding?
Thanks!
UPDATE 1: The weird padding only occurs if I have my border-right present. If i remove that border, the padding never appears.
UPDATE 2: If I change the row wrapper to display: block, I eliminate the mysterious gap, but I'll leave the question open, in case anyone wants a display:tablefriendly solution.
UPDATE 3: The only answers that have been submitted as of yet involve javaScript. Since I did not specify that I wanted a pure CSS solution, I'll give the user who submitted a functional answer credit, but if you like a challenge and see this question, please feel free to drive to derive a pure CSS solution. Thank you!
body {
width: 100%;
padding: 0;
margin: 0;
}
article {
width: 75%;
}
.index {
background-color: blue;
display:block;
padding: 0;
border-top: solid 2px red;
border-left: solid 2px red;
border-right: solid 2px red;
box-sizing: border-box;
vertical-align: middle;
}
.index > div {
display: table;
box-sizing: border-box;
width: 100%;
}
.myTable > div {
display: table-cell;
box-sizing: border-box;
}
.myTable {
background-color: rgb(40, 40, 40);
}
.myTable > div {
color: white;
text-align: right;
border-collapse: collapse;
border: none;
border-width: 0;
}
.myTable > div.date {
text-align: right;
padding: 2%;
vertical-align: middle;
}
.index .excerpt {
width: 92%;
}
<body>
<article id="post-1" >
<div class="index">
<div class="myTable">
<div class="date">
1 .10 .2017 </div>
<div class="excerpt">
<p>Notice there is about 1px padding to the right of this table and its containing div, but only at certain screen widths </p>
<p>over there -----></p>
<p>You'll see that when the unwanted padding appears (at random widths), the right border of the div and this table appears to turn purple. This purple is not a true purple, but only appears as purple. The background color inside the container is blue, and at only one pixel the eye mixes it with the red border of the containiing div. You can verify this if you change the background-color of ".index" in the css to any color you want. </p>
<p><span style="color:orange"> It is important that I keep the the wrapper for both cells as (display: table)</span>, because I actually have other rows that are in this container that I am also displaying as tables. If I display them all as table-cells, they all end up on the same line, which is not what I want. </p>
<p>However, I have recognized that this problem occurs even if there is only one table.</p>
<p>This only occurs in Chrome, not Edge, Safari or Firefox.</p>
</div>
</div>
</div>
</article>
</body>
var article = document.getElementById('post-1');
article.style.width = Math.round(article.parentElement.clientWidth * 3 / 4) + 'px';
window.addEventListener("resize", function() {
article.style.width = Math.round(article.parentElement.clientWidth * 3 / 4) + 'px';
});
body {
width: 100%;
padding: 0;
margin: 0;
}
article {
width: 75%;
}
.index {
background-color: blue;
display: block;
padding: 0;
border-top: solid 2px red;
border-left: solid 2px red;
border-right: solid 2px red;
box-sizing: border-box;
vertical-align: middle;
}
.index > div {
display: inline-block;
box-sizing: border-box;
width: 100%;
}
.myTable > div {
display: table-cell;
box-sizing: border-box;
}
.myTable {
background-color: rgb(40, 40, 40);
}
.myTable > div {
color: white;
text-align: right;
border-collapse: collapse;
border: none;
border-width: 0;
}
.myTable > div.date {
text-align: right;
padding: 2%;
vertical-align: middle;
}
.index .excerpt {
width: 92%;
}
<article id="post-1">
<div class="index">
<div class="myTable">
<div class="date">
1 .10 .2017</div>
<div class="excerpt">
<p>Notice there is about 1px padding to the right of this table and its containing div, but only at certain screen widths</p>
<p>over there -----></p>
<p>You'll see that when the unwanted padding appears (at random widths), the right border of the div and this table appears to turn purple. This purple is not a true purple, but only appears as purple. The background color inside the container
is blue, and at only one pixel the eye mixes it with the red border of the containiing div. You can verify this if you change the background-color of ".index" in the css to any color you want.</p>
<p><span style="color:orange"> It is important that I keep the the wrapper for both cells as (display: table)</span>, because I actually have other rows that are in this container that I am also displaying as tables. If I display them all as table-cells,
they all end up on the same line, which is not what I want.</p>
<p>However, I have recognized that this problem occurs even if there is only one table.</p>
<p>This only occurs in Chrome, not Edge, Safari or Firefox.</p>
</div>
</div>
</div>
</article>
This is a rounding problem, caused by a container with a width of 75%. Apparently the table isn't good at filling a space of, say, 657.75 pixels fully.
A simple workaround would be to give the parent div the same background color as its border color, or the same as the table's background color. But you probably already considered those...
The real solution is to round the width of the article to whole pixels, so that the table is able to fill it neatly without having three quarter pixel left over.
This can't be done with CSS, so we need JavaScript.
var article = document.getElementById('post-1');
article.style.width = Math.round(article.parentElement.clientWidth * 3 / 4) + 'px';
window.addEventListener("resize", function() {
article.style.width = Math.round(article.parentElement.clientWidth * 3 / 4) + 'px';
});
body {
width: 100%;
padding: 0;
margin: 0;
}
article {
width: 75%;
}
.index {
background-color: blue;
display: block;
padding: 0;
border-top: solid 2px red;
border-left: solid 2px red;
border-right: solid 2px red;
box-sizing: border-box;
vertical-align: middle;
}
.index > div {
display: table;
box-sizing: border-box;
width: 100%;
}
.myTable > div {
display: table-cell;
box-sizing: border-box;
}
.myTable {
background-color: rgb(40, 40, 40);
}
.myTable > div {
color: white;
text-align: right;
border-collapse: collapse;
border: none;
border-width: 0;
}
.myTable > div.date {
text-align: right;
padding: 2%;
vertical-align: middle;
}
.index .excerpt {
width: 92%;
}
<article id="post-1">
<div class="index">
<div class="myTable">
<div class="date">
1 .10 .2017</div>
<div class="excerpt">
<p>Notice there is about 1px padding to the right of this table and its containing div, but only at certain screen widths</p>
<p>over there -----></p>
<p>You'll see that when the unwanted padding appears (at random widths), the right border of the div and this table appears to turn purple. This purple is not a true purple, but only appears as purple. The background color inside the container is
blue, and at only one pixel the eye mixes it with the red border of the containiing div. You can verify this if you change the background-color of ".index" in the css to any color you want.</p>
<p><span style="color:orange"> It is important that I keep the the wrapper for both cells as (display: table)</span>, because I actually have other rows that are in this container that I am also displaying as tables. If I display them all as table-cells,
they all end up on the same line, which is not what I want.</p>
<p>However, I have recognized that this problem occurs even if there is only one table.</p>
<p>This only occurs in Chrome, not Edge, Safari or Firefox.</p>
</div>
</div>
</div>
</article>
As you can see in this picture, I've got an orange div inside a green div with no top border. The orange div has a 30px top margin, but it's also pushing the green div down. Of course, adding a top border will fix the issue, but I need the green div to be top borderless. What could I do?
.body {
border: 1px solid black;
border-top: none;
border-bottom: none;
width: 120px;
height: 112px;
background-color: lightgreen;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
margin-top: 30px;
}
<div class="header">Top</div>
<div class="body">
<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>
You could add overflow:auto to .body to prevent margin-collapsing. See http://www.w3.org/TR/CSS2/box.html#collapsing-margins
What you experience is margin collapsing. The margin doesn't specify an area around an element, but rather the minimum distance between elements.
As the green container doesn't have any border or padding, there is nothing to contain the margin of the orange element. The margin is used between the top element and the orange element just as if the green container would have the margin.
Use a padding in the green container instead of a margin on the orange element.
Use padding instead of margin:
.body .container {
...
padding-top: 30px;
}
Not sure if this will work in your case, but I just solved this with the following CSS properties
#element {
padding-top: 1px;
margin-top: -1px;
}
#element was being pushed down because it's first child element had a margin-top: 30px. With this CSS, it now works as expected :) Not sure if it'll work for every case, YMMV.
You can either add padding-top: 30 on the green box, use relative positioning on the orange box with top: 30px, or float the orange box and use the same margin-top: 30px.
You read this document:
Box model - Margin collapsing
CSS
.body {
border: 1px solid black;
border-bottom: none;
border-top: none;
width: 120px;
height: 112px;
background-color: lightgreen;
padding-top: 30px;
}
.body .container {
background-color: orange;
height: 50px;
width: 50%;
}
Not sure how hackish this sounds, but how about adding a transparent border?
This code leaves this weirdly shaped border (it's the active link border) when you click the image, like so:
And when we put an orange background on the <a> element we see that there's an orange area underneath the image. So, <a> wraps around the image, but also around an area underneath it.
Why does <a> do that?
First, by default element has an 'outline' decoration, to disable it use the following css rule:
a { outline: 0 }
Second, the area is created by another css property you apply on the image itself: 'margin', which is the margin between the image to the elements around it, in this case it affects the element which wraps it, to fix that change the following rules:
.socialBtn {
/* Removed margin here so there won't be space around image */
height: 2.5em;
width: 2.5em;
}
a {
height: 2.5em; /* Gave it width like the image */
width: 2.5em; /* Gave it height like the image */
display: inline-block; /* Made it inline-block so it can have width and height */
}
http://jsfiddle.net/we67Lp6o/6/
UPDATE:
Changing source to understand how the display property: block vs inline-block vs inline.
Removed "outline: 0" from a selector, it is a bad practice, read why here.
It's actually not spacing underneath at all. It's because your a tag is collapsed due to the default setting of display:inline. Adding display: inline-block to those as will fix that issue:
FIDDLE
Alohci offers a great explanation on why this happens
UPDATE
The extra spacing is the margin on the img:
.social a {
display: inline-block;
background-color: orange;
padding: 0;
margin: 0;
vertical-align: top;
}
.socialBtn{
height: 2.5em;
width: 2.5em;
padding: 0;
margin: 0;
vertical-align: inherit;
}
NEW FIDDLE
The spacing answer can be provided here
inline-blockis the property you need for the <a> elements. For the spacing issues, the margins need to be removed.
The reason for the strangely shaped border, is of the outline property on <a>. It's showing you the area of your link, but due to the display and margin properties it is a different size than your img.
Here is the new CSS:
.header {
width: 650px;
height: 150px;
clear: left;
margin: 0px auto;
background-color: #efefef;
position: relative;
border-radius: 4em 4em 0 0;
}
.social{
padding: 1em 2em 0 0;
display: inline-block;
position: absolute;
right: 0;
}
.socialBtn{
height: 2.5em;
width: 2.5em;
}
img {
display: block;
}
a {
display: inline-block;
background-color: orange;
}
http://jsfiddle.net/Lg5a0ksg/4/
Set your images to display: block (or alternatively, to vertical-align: bottom) to remove the default space at the bottom. (By default, images align to the baseline of any potential text next to them, and they leave that space there even if there's no text beside them.)