FAQ Database Discussion Community


HTML Margin and padding extrange behaviour

html5,css3,margin,padding
Well, I am working on a webpage. I want a black aside to the left and the content to the right. Here's the simple HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style/main.css" > <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove...

CSS - Odd issue with centering a div with percentages

html,css,margin,frontend
I'm building a fairly simple static frontend-only webpage. I have the following css rules for my wrapper div (everything else in the page is in it) and the body: body { background-image: url(../img/background.jpg); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; margin: 0; } #content_wrapper { margin: 15px 10%; /*Client wants 20%...

Two images overlapping case in windows phone

c#,image,windows-phone-8.1,margin,windows-phone-store
Consider I have a grid in that I place two images A and B. Both are visible all the times as margins are set like that. Here as A is drawn first so B is completely Visible overlapping A partially and hence A is Partially visible. Here my Question comes...

Do vertical margins collapse reliably and consistently across all browsers?

css,css3,margin
I'm trying to understand the effect that margin has on two elements. I have the following HTML, see the dabblet: <p>some text</p> <pre>some code</pre> I have the following CSS: body { color: white; } p { background: red; margin-bottom: 50px; padding: 20px; } pre { background: purple; margin-top: 40px; padding:...

remove margin between relatively positioned elements [duplicate]

html,css,margin,spacing
This question already has an answer here: How to remove the space between inline-block elements? 15 answers I have some relatively positioned inline-block elements side-by-side within a parent, and I've applied a margin:0 to all children of the parent, but they still have some space in between them. What's...

align five divs equally next to each other

html,css,margin
I'm even finding it difficult to phrase my question right so bear with me here please. I have one div that serves as the main container of my page. Inside that div I would like to have five other divs which have equal size and equal margins. However when I...

CSS margin-left transition not working

css,margin,transition
I'm trying to do a transition from the center to left and reduce the height of an image. The height transition is working fine, but the margin just teleports to the left instead of animating. this is my code: #logo_img { height: 55px; width: 55px; background-color: red; margin-left: auto; margin-right:...

How is margin-bottom: auto calculated?

html,css,margin
I noticed that there was a lot of empty space under my #thing div. My #thing margin was set to margin: 100px auto;, so I changed it to margin: 100px auto 0px auto;, and the empty space went away. Why would a margin-bottom set to auto create a bunch of...

Unwanted Margin Between Element - Unable to Remove

html,css,margin
There is a large 'white-space' between my 'DIV: IMAGE' and 'DIV: SLIDER' that I cannot account for. I cannot see that I have coded a margin between the two elements and no matter what I seem to do to my stylesheet, I cannot remove it. What part of the code...

How to remove a margin when a div go to a new line?

css,margin
I have a container div with a fixed width : 160px I can have multiple button inside this container and the addition of the widths can be superior to 160px. Each button have a margin-left set at 10px except the first button using css. When buttons got to the new...

Where does chrome developer tools show the real calculated width of an element

css,width,margin,padding
I've read somewhere on the internet on the box model and it says that the real width of a block element is not it's width as defined in the CSS but calculated according to the below formula: Real Width = margin-right + border-right + padding-right + width + padding-left +...

Margin/Padding gap in Kivy UI

python-3.x,margin,padding,kivy
I am using pydev on eclipse luna. My KV file is as follows: <LoginForm>: userid: userid password: password size_hint_x: 0.5 size_hint_y: None height: 200 orientation: 'vertical' pos_hint: {'center_x': 0.5,'center_y':0.5} minimum_height: 100 minimum_width: 100 #User ID Label: text: 'User ID' font_size: 20 size_hint_x: None TextInput: id: userid font_size: 20 #User PW...

Bootstrap 3 Button with Margin no longer working

jquery,css,twitter-bootstrap,button,margin
The fiddle for demo Can't figure out why this button doesn't rollover or is clickable when I add margin to the top and left. If I take out the class on line 47 of the css, it works as needed but trying to line it up with the text in...

space between bottom and fixed ul

css,position,html-lists,margin,fixed
I want my nav bar to be fixed at the bottom of the screen. Now, however, there is some space between the nav bar (ul) and the bottom of the screen. Only margin-bottom: -1% seems to work but I would like to fix it without that or at least understand...

Why is my div not horizontally centered?

css,center,margin,auto
I have two divs horizontally aligned next to each other, each taking ~50% of the page width. Now if the browser window changes, my I want to keep one div centered (<div id="featured">) but it doesn't, even tho I set margin: 0 auto;) How can I keep it centered in...

Margin-top/bottom not works the to margin-left/right in a sample

html,css,margin
I am new to HTML & CSS. I have tried the code below <!DOCTYPE html> <html> <head> <title>Center</title> </head> <body> <div id="div1" style="width:300;background-color:olive"> <div id="div2" style="width:100px; margin-left:auto; margin-right:auto; background-color:gray"></div> </div> </body> </html> The "div2" is in centered horizontally. Then I change the width to height & margin-left/right to margin-top/bottom. (the...

Remove top and bottom body margins

html,css,margin
In order to practise CSS I've decided to create Google-like page. My problem is no matter what I do, there's always that little extra space on top and on bottom of body even though body has margins and padding of 0. HTML tag for some reason works well with the...

Why does the box come out like this (padding/border/margin)?

html5,css3,border,margin,padding
So this is my first day learning HTML&CSS and I'm currently having a problem. Why does this block come out like this (on left is what I get & on right is what I'm trying to achieve): HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Temporary</title> <link rel="stylesheet" href="main2.css"> </head>...

How to keep divs from overlapping/moving/making my page look ugly when resizing width and/or height of browser window

html,css,resize,margin,padding
So I'm trying to be able to keep everything where it is even on a a window re size.. an example of what I wish for is similar to face book's registration page (or any page on facebook for that matter... everything gets hidden behind the browser as i minimize...

How to add padding/margin to move :after up

css,margin,padding
I am trying to move an :after up, so that it sits more in line with the top of the element it is besides. I've tried adding padding-top and padding-bottom, adding margin-top and margin-bottom, but none of these work. #myDiv:after { color: #D03540; content: " *"; } Any ideas? ...

How to set CheckBox margin dynamically in Silverlight

c#,silverlight,margin
I am creating CheckBoxes dynamically on my grid. Now I also want to set the margin(respected to the CheckBox) dynamically but not sure what would be the best way. For example, If there is only one CheckBox then the margin should be {5,0,0,0} If there are two CheckBoxes then the...

Media Query Margin Fail

css,media-queries,margin
So far all of my media queries are fine, except this one. I have an actual iPad and I am using a simulator as well as my client doesn't like his logo resting against the edge of the screen, so all I'm trying to do is either give it a...

CSS inline-block margin bottom issue [duplicate]

css,margin
This question already has an answer here: How to remove the space between inline-block elements? 15 answers I got a problem with css inline-block, whenever i put inline-block for display property it's giving me some whitespace about 1px how to fix it ? word-spacing 0px and letter-spacing 1px is...

HTML5 & CSS3 responsive website design margin issue

html5,css3,responsive-design,margin,padding
Please take a look here, on my code. I am trying to make a responsive web page, but there is weird margin from top and bottom of first article column. I am talking about margin between top navigation and content column and between footer and content column, and I just...

Margin: auto Not Working Properly

html,css,margin
This is my HTML. I am trying to have three floating divs with centered images and descriptions <div class=icons> <div class=iconslist><img class=iconimages src="gas.png"><div class=iconlabels>The EPA Estimates <b>10%</b> of air pollution comes from lawn care</div></div> <div class=iconslist><img class=iconimages src="stack.png"><div class=iconlabels>Over <b>800,000,000 gallons</b> of gasoline are used per year on lawn care</div></div>...

jQuery .height() doesn't return the right value

javascript,jquery,height,margin
I have a website that needs to be fullscreen at every screen. For this reason I use alot of jQuery to determin the height, max-height, margins, ... I have a margin-top on the container id. When i call the height, which is the base of determing the margin-top, at the...

Unexisting margins

jquery,html,css,margin
I'm working on some layout made from squares, their width is defined by percentages and height by padding the same as width for 1:1 aspect, and using jQuery Masonry for positioning them. The problem is that some like margins started showing up, there is no padding nor margins set to...

give margin bottom inside dd class

html,css,margin
i want to give margin bottom to them code is as shown below, <div class="dd" id="menu_list_drag"> <?php echo $li; ?> </div> where $li is as shown below, foreach ($p1 as $p) { $inner_li = ""; $p2 = array_filter($menu, function($a)use($p) { return $a['parent_id'] == $p['id']; }); if ($p2) { $inner_li...

How do I correctly create an offset between div's

html,css,css3,width,margin
At the moment I do this: .column-33 { width: 32%; float:left; } I want to have the width changed to 33.33% but my item is styled like this: .news-collection-item { margin: 0px 5px; } So what happens is there will only be 2 items in line when the width is...

Set margin to entirely hide element from FrameLayout

android,animation,margin,framelayout
I have a Frame Layout with two child, one of which is a LinearLayout (search_filters), sits right under my toolbar. <!-- Your normal content view --> <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:animateLayoutChanges="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#EEEEEE" android:id="@+id/main_parent_view" /> <LinearLayout android:layout_width="match_parent"...

Change the color of the “margins” on Alert Buttons

android,margin,alertdialog
How do I change the color of the margins that separates the Alert Buttons (Positive and Negative)? This is what I want to change: http://imgur.com/BrIa5DB (Cant freaking upload images due to rep) Thanks! EDIT What I have now is: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#80000000" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"...

Why won't each color fill its respective box in my menu bar?

html,css,margin,padding
My end goal is when each box is clicked, the background-color is shown. When I added the Javascript for this, it became apparent that the back-ground color didn't actually fill the whole box. This wasn't apparent when there wasn't a color. How do I fix this? http://jsfiddle.net/k7rm33h7/ HTML: <div id="logo">Codeplayer</div>...

Main purpose of Margin

html,css,margin
I've recently started learning HTML and CSS. In regards to the 'margin' property: Is the main purpose of this property to center elements horizontally on the web page? I created a navigation for a site, but I don't see any reason to use the margin property. Why would someone use...

Remove margin App Android with Android Studio

android,margin
How can I remove the margin??? This is the code of Layout <LinearLayout android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/fragmentContainer" android:orientation="vertical" android:layout_weight="1"> <ListView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/lv" style="@style/Base.TextAppearance.AppCompat.Body1" android:layout_gravity="center_vertical" /> </LinearLayout> </LinearLayout> How can I remove the margin???...

Removing body margin in CSS

html,css,margin,space
I'm new to web development, and met a problem when removing margin of body. There's space between the very top of the browser and "logo" text. And my code is here on jsbin. Is body { margin: 0;} wrong if I'd like to remove the space?...

Center a div with dynamic width in a parent where the width can be bigger than the parent

html,css3,css-float,css-position,margin
Okay I hope I can make clear what I need. I have 5 Divs: a wrapper, div 1, div 2, div 3 and div 4. HTML: <div id="main"> <div id="one">1</div> <div id="two">2 <div id="four">4</div> </div> <div id="three">3</div> </div> CSS: #main{ height:200px; border: 1px solid red; float:left; } #one{ min-width:100px; max-width:200px;...

How to add a simple 8dp header/footer to Android's RecyclerView?

android,margin,padding,recyclerview
Is there a way to add a simple header/footer to a RecyclerView? Here you can see what I've got. The first Card touches the Toolbar And here you can see what I want. 8dp Padding between the bottom and the Card. Methods I tried so far: Use a header view...

Trying to remove padding from my h2 titles

html,css,margin,padding
Hi I'm trying to bring my h2 Titles towards the top of the div they're in, but I can't figure out how to remove the padding / margin / whatever it is that is causing them to be spaced down so far. This is the first time I've tried using...

How do I have a seperate padding for groupbox header and groupbox content

wpf,xaml,margin,groupbox
I have a groupbox, but I want to had a padding of 5 all around the header, but no margin around the content. How would I best go about this? I can't seem to find a way to seperate the padding values from each other......

Is there any way to merge margins in WPF?

wpf,xaml,margin
In HTML, for a table (at least), one can style the element so that margins are merged. I.e. two adjacent rows both have top and bottom margins of 10, so the gap between these two rows will be 20. When their margins are merged, the gap is only 10. Is...

Android layout button lower than others in horizontal linearlayout

android,xml,button,layout,margin
for some reason the button on the right comes out lower. I have attempted to edit the different parts, am I missing a margin difference or is it because of space fitting in. It is simply a linear layout horizontal with a textview, edit text and button. Screenshot of the...

how to increase the margin below this form

forms,margin
I'm not able to add some blank space below this form. The bottom of it still sticks to the edge of the page. form { display: inline; text-align: center; margin-bottom: 50px; } May I know how I can fix this Thanks!...

Unexpected margin after inline-block element

html,css,margin
I have the following code: http://jsfiddle.net/yxxhj33x/ As you can see, I have the .links element followed by a input[type='text'] element. Unfortunately, there is a margin above the input, which won't go away when I add: .links { display: inline-block; border: 1px solid black; width: 100%; font-size: 0; white-space: nowrap; overflow-x:...

center content with full background

css,center,margin
Inside a div I want a full width background color and center the content inside. I have read in some other posts that it needs an outer div to set the background-color there, and then an inner div with the width of my content and margin:0 auto;. I tried that...

UIViewController Nested View To Screen Edge

ios,uiview,autolayout,margin
I have a nested view inside my view controller and when i set the leading and trailing (to superview) constraints to 0, the subview spans between left and right edges of the superview leaving a margin on both sides. How do I remove this margin without adding a negative value...