Jump to content

Display Inline-block Forced Padding


nachumk
 Share

Recommended Posts

Why are padding pixels placed between divs that use display inline-block? If I use float:left then they are flush together, otherwise they are given a forced padding (4 pixels on my system).Thanx,I have put this up on http://localhost/tmp.phpHTML:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1"> </head> <body"> <style type="text/css"> .testItem {display:inline-block;width:50px;padding:0px;margin:0px;background-color:red;}</style> <div class="testItem">test</div> <div class="testItem">test</div> </body> </html>

Link to comment
Share on other sites

It's not padding, it's whitespace.In HTML, a line break is translated to a whitespace when rendered. If you want inline-blocks to be next to eachother, you have to put their HTML all on the same line:

<div class="testItem">test</div><div class="testItem">test</div>

Also, put the <style> element in the <head> section of your document, it's incorrect to have it in the body.

Link to comment
Share on other sites

I have put this up on http://localhost/tmp.php
and as a side note, http://localhost is only a reference to your machine, so we/other people can't actually open those kind of links.
Link to comment
Share on other sites

[in HTML, a line break is translated to a whitespace when rendered. If you want inline-blocks to be next to eachother, you have to put their HTML all on the same line:]Thanx! That was the strangest thing and I just couldn't figure it out! I'm still curious why this only occurs with divs as inline-blocks and not when floating left.[Also, put the <style> element in the <head> section of your document, it's incorrect to have it in the body.]The style is in the code b/c that was after php generation. I have includes for the beginning of each page and that includes the start of the body with a top menu. So when this code comes in I'm already in the midst of the body. I prefer if I can to keep the styles that are relevant to only a certain part of the page included with that page. Does that make sense? I can put the code up if that would clarify it. Can you tell me if this is OK?[and as a side note, http://localhost is only a reference to your machine, so we/other people can't actually open those kind of links.]I accidentally put up my local link, I meant http://nkcorner.com/tmp.phpThanx,

Link to comment
Share on other sites

is the style somehow part of the include()? Regardless, you can still just make an external stylesheet for just a specific page and link to it.

Edited by thescientist
Link to comment
Share on other sites

Thanx! That was the strangest thing and I just couldn't figure it out! I'm still curious why this only occurs with divs as inline-blocks and not when floating left.
It's the inline part, it behaves as a character in some text.That means two things:
  1. It has a little bit of vertical space right below it (for the characters that have extra space below such as p,g or j)
  2. All spaces and line breaks in the code are rendered as spaces between the characters.

Just as an example of why there's space between the blocks, consider each of your inline blocks as a character.The following code:

<b>AA</b>

Will be rendered like this:A AAnd not like this:AAOr this:AA

Link to comment
Share on other sites

is the style somehow part of the include()? Regardless, you can still just make an external stylesheet for just a specific page and link to it.
The amount of css code started as small so I kept it inline. I may switch it to an external stylesheet (link), but it will still be in the <body> as opposed to the <head>, unless I include it using php before the <body> is started which I'd rather not do.
Link to comment
Share on other sites

The amount of css code started as small so I kept it inline. I may switch it to an external stylesheet (link), but it will still be in the <body> as opposed to the <head>, unless I include it using php before the <body> is started which I'd rather not do.
I'm confused as to why it needs to be in the body? The modern way is to keep it in a separate file, unless you need to override a style for a specific page, which is where the cascading part comes from. Inline is not the same as internal. What you have written is internal, and if you choose to use it that way, then it should be in the head section of your document. The body is for your content, ideally. (with special exceptions for PHP, javascript, stuff like that). So with that in mind, ideally your styles should be kept in a separate file linked to in the <head> section, and then if your styles start getting so specific that you need to override your general styles, then you can take advantage of the cascading aspect of stylesheets. But as you said, since you have so little, why not just tuck it away, and then all your pages can use it? Which is the biggest feature of CSS.
Link to comment
Share on other sites

I'm confused as to why it needs to be in the body? The modern way is to keep it in a separate file, unless you need to override a style for a specific page, which is where the cascading part comes from. Inline is not the same as internal. What you have written is internal, and if you choose to use it that way, then it should be in the head section of your document. The body is for your content, ideally. (with special exceptions for PHP, javascript, stuff like that). So with that in mind, ideally your styles should be kept in a separate file linked to in the <head> section, and then if your styles start getting so specific that you need to override your general styles, then you can take advantage of the cascading aspect of stylesheets. But as you said, since you have so little, why not just tuck it away, and then all your pages can use it? Which is the biggest feature of CSS.
Can you define what you mean by inline vs internal? Is inline using a link ref vs internal having style in code?Here's a more clear explanation: My home.php file looks like this:<?phpinclude("header.php");include("menu.php");code for home pageinclude("footer.php");?>The header is boilerplate and other stuff, menu is for the top menu.The header is where the body tag is opened. This is why I keep the stylesheets in the body within the related files that they are associated with. For example I have a stylesheet just for the menu so it's stylesheet (menu.css) is included in menu.php, but that's still within the body tags. My stylesheets are for both layout and look. The layout stylesheet for the menu is completely irrelevant to the other parts of the page and I therefore don't want it to be included as a general top level stylesheet. If I could include a stylesheet at the start of menu.php and remove it at the end of menu.php without killing the look of the webpage then I would.Does this make sense?I understand that I could write a more advanced php file to include required stylesheets altogether in the head section, but is that really necessary?Thanx,
Link to comment
Share on other sites

I know about that method too. I didn't realize that was called inline, but in hindsight - duh. Anyhow, I don't want to use inline for the same reasons as the styles exist. Many elements use the same class in order to give the same look. Is it problematic that I use "internal" style sheets or that I link a style sheet directly from menu.php if that css file is only relevant for the menu? Even though it is included within the "body" of the page?

Link to comment
Share on other sites

I guess what it boils down to is if your not using inline styles, just put the styles, either internal or external in the <head> section. Generally people put all their styles externally so all pages can use them, and so its easier to change styles sitewide, by only having to change one file, and then if they have a few specific styles for a certain page, they declare them internally. If something needs to be style even more specifically than that, then you have your inline style.You can still use menu.css, for menu.php, just put declare it as an external stylesheet in the head section of tmp.php, or whatever page is calling all your includes.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...