This question already has answers here:
Margin-bottom for <a> link elements
(2 answers)
Closed 2 years ago.
.butn{
text-align:center;
margin-top: 15px;
margin-right: 5px;
color: white;
padding: 10px 15px;
background:black;
background-repeat: repeat-x;
position:relative;
}
<body>
Clear
</body>
What I am working on is href that works like a button function. However, when I try to position this so called "button" with anything margin related like margin-top and margin-right, it does not change the position of this href. So my question is how do I move the position of this (href with padding)
Put the margins in style attribute.
Clear
It seems margins of html <a></a> tag in a style like buttons doesn’t work. I faced the same problem and handled it like this.
I am not clear why this works(!?!). But I shared my experience.
Hope this helps!
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 6 months ago.
This post was edited and submitted for review 6 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Could anyone shed some light upon the source of the 8px whitespace at the bottom of the element box when inspected with DevTools?
/* No stylesheet - all CSS from DevTools on Chrome user agent stylesheet */
element.style {}
html {
display: block;
}
head {
display: none;
}
body {
display: block;
margin: 8px;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
<html>
<head></head>
<body>
<p>Hello, world</p>
</body>
</html>
Highlighting the <html> element box with DevTools shows its vertical dimension to be 189px:
Whilst from DevTools, the highlighted <body> element box has a total vertical dimension of 181px (including margins).
Why does the <html> element box extend down by 8px beyond the <body> element box at the bottom of the page?
Its called default margin set by the browser . If you want to reset everything to zero you can use
*{margin:0; padding:0;}
Browsers come with a surprising amount of CSS by default, which we call user-agent stylesheets. These styles are the reason that, without any CSS on our part, an <h1> is bigger than an <h2>, and why the <body> has a margin on it that we tend to always remove.
a
Like Kevin Powell writes on freecodecamp, it's quite normal to the following at the start of a new project.
body {
margin: 0;
}
This question already has answers here:
Weird ul list issue in my case
(2 answers)
Closed 6 years ago.
I have been working on making a horizontal navigation bar for my site, but the top of the nav bar seems to be cut off and will not touch the top of the page.
I have tried using:
* {
padding: 0;
margin: 0;
}
However, that causes me to have to add padding to everything.
Is there any other way to fix it?
Fiddle: https://jsfiddle.net/bp2jnytc/
For your <h3> elements within your unordered lists, you could try:
h3 {
margin: 0;
padding: 15px;
}
And then for your <ul> element within your <header>:
header ul {
margin: 0;
}
There is nothing wrong with it, well, at least when I copied the code to my text editor and then ran it in chrome. I believe it to be a problem with how jsfiddle is displaying the information, not to do with your code.
Remove margin-top from the ul and the h3 tag. https://jsfiddle.net/bp2jnytc/2/
This question already has answers here:
Is there any way to add padding to select options via CSS?
(4 answers)
Closed 8 years ago.
I have a form with around 8 options. I succeeded to make them diferent colors but now I would like to add white spacing between them - like 10px. I tried even adding border but its not showing.
this is what Im trying
#mobileMenuSections select option {
margin:5px 0;
background: rgba(0,0,0,0.3);
color:#fff;
background: url("Images/buttonnavy.png") no-repeat scroll left top #092F46;
}
or with border:
#mobileMenuSections select option {
border-top:10px 0;
background: rgba(0,0,0,0.3);
color:#fff;
background: url("Images/buttonnavy.png") no-repeat scroll left top #092F46;
}
Unfortunately none of these are showing. Background image is also not showing.
thanks in advance for help.
Styling options are very limited and very hard to maintain on differect browsers. I suggest you look at this stackoverflow question or maybe look into some jQuery UI dropdown list or another jQuery plugin.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am using HR tag in my HTML page. But the horizontal line is not covering the whole page along X axis. There is a gap at left and right both. How can I fill this gap?
For example, below is a sample code -
<html>
<hr>
</html>
You can do the following -> demo
You have two options that I know of anyways - Using a horizontal line or a div with a top or bottom border.
The reason why you have a space or gap is because browsers comes with different pre-set settings - so you need to set margin and padding to zero. Take a look at the demo.
CSS
* {
margin:0;
padding:0;
}
hr {
margin-top: 30px;
/*so you can see it in demo */
width: 100%
}
.demo {
position: relative; /*so I could use 'top: 30px' */
top: 30px;
/*so you can see it in demo*/
width: 100%;
border-top:1px solid black;
}
HTML
<hr/>
<div class="demo"></div>
Edit: As Ojdo commented, you CAN reset before working on a project using something like this Meyer's Reset OR you can make it 'cross-browser' compatible and use normalize.css from Necolas - this basically tries to make your default css look consistent among several browsers. The choice is ultimately up to you. Start from the ground up or start with something somewhat consistent.
that's because of the margins of the body. try this:
<html>
<body style="margin:0;">
<hr>
</body>
</html>
put this css on the hr:
hr {
margin-left: -8px;
margin-right: -8px;
}
This happens as there is always automatic margin
Here is a fiddle example:
http://jsfiddle.net/ha97t/
The gaps are caused by the default margin of 8px for the body element (which is a common browser default and described both in CSS 2.1 and in HTML5 CR).
You can override the horizontal margins of body rather simply:
body { margin-left: 0; margin-right: 0 }
It is possible to use more extensive overrides, like “CSS resets”, but they could affect your page layout in many ways and do not contribute to solving this problem any better than simply overriding the specific properties for body.
However, removing those margins means that text will run from the left edge of to right edge, often making letters touch the edges. So if you wish to make the horizontal rule extend across the page without affecting anything, set negative margins on it. Then it is best to set the body margins explicitly (to guard against browsers not implementing them according to common practice):
body { margin: 8px }
hr { margin-left: -8px; margin-right: 8px }
I have a simple button (as shown below) on which I need to display two pictures, one on either side of the button text. Im battling to create the CSS that will work in both Firefox and Internet Explorer! (the button images are coming from a JQuery UI skin file)
CSS
button div{
width:16px;
height:16px;
background-image: url(images/ui-icons_d19405_256x240.png);
}
button div.leftImage{
background-position: -96px -112px;
float: left;
}
button div.rightImage{
background-position: -64px -16px;
float: right;
}
HTML
<button><div class="leftImage"></div><span>Button Text</span><div class="rightImage"></div></button>
Preview
Firefox
Internet Explorer 8
Here is how to do it
The Theory
Block elements (like DIV) although displayed in order of creation, will position themselves adjacent to the previous element or when short of space, on the next line. Because we dont want to give the button a width (we want the button to be automatically sized based on the content of the button) the block elements continued to appear on the next line (see IE8 image in the question above). Using white-space:nowrap forces inline elements (like SPAN and EM) to be displayed on the same line, but is ignored by block elements, hence the solution below.
CSS
button{
margin: 0px;
padding: 0px;
font-family:Lucida Sans MS, Tahoma;
font-size: 12px;
color: #000;
white-space:nowrap;
width:auto;
overflow:visible;
height:28px;
}
button em{
vertical-align:middle;
margin:0 2px;
display:inline-block;
width:16px;
height:16px;
background-image: url(images/ui-icons_3d3d3d_256x240.png);
}
button em.leftImage{
background-position: -96px -112px;
}
button em.rightImage{
background-position: -64px -16px;
}
HTML
<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>
The Result
Internet Explorer 6, 7, 8 and Firefox 1.5, 2, 3
I would use spans not divs for the image containers, since you seem to want the images to appear inline. Using floated divs is just too complex.
In fact, you could probably simplify things further by applying one background image to the button itself, and one to the button-text span, and removing the other two containers altogether.
Another alternative is to simply add the images in as img tags.
try resetting the button css.
button{
border:none;
background:none;
padding:0;
margin:0;
}
And add a space inside an empty DIV see if it works.
<button><div class="leftPic"> </div><span>Button Text</span><div class="rightPic"> </div></button>
I think you can strip off the button tag and use a div tag instead.For other button action use javascript onlick() function and use css to change curser on hover(to make it look like button).For my project I used a similar approach.This may help you :)
I know this is already solved, but just wanted to add that an easy way to put more than 1 image in a button is creating 1 .png with the dimensions of the button you want to create and the to elements together in one file.