Display Inline-Block Not Growing Horizontally with Child Having Padding in Per Cent

Display inline-block not growing horizontally with child having padding in per cent

It's the use of percentage value that consider the parent width as reference. Here you have a kind of cycle since the width is also based on the content.

In this case the browser is ignoring the padding to find the width of the container based on its content then the padding is calulated based on that width and added to the image to create the overflow. The browser will not go back to change the container width because it will be an infinte loop.

The only way to fix this is to consider fixed values:

article {  background: fuchsia;  display: inline-block;}
img {  padding: 10px;}

<article>  <img src="https://fakeimg.pl/412x412"/></article>

inline-block div not initially expanding with content

The horizontal padding percentage on .user-tab a seems to be causing the problem, trying using em or px instead.

.content {  position: relative;  width: 100%;  height: 83%;}.user-tab {  position: absolute;  right: 0;  z-index: 1;  padding: 0.35% 1%;  white-space: nowrap;}.user-tab a {  display: inline-block;  padding: 0 0.5em;}

<div class="content">  <div class="user-tab">    <a href="">      <span class="icon-user"></span>      John Doe    </a>

    <a href="">      <span class="icon-cart"></span>      My Offers    </a>
    <a href="">      <span class="icon-cancel-circle"></span>      Logout    </a>
  </div></div>

Trying to center the input box inside a div

You can do it by changing the style of #siteInfo like this:

body {
  background: yellow;
}

#siteInfo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  padding-top: 3%;
  padding-bottom: 5%;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  justify-content: center;
  flex-direction:column;
  align-items:center;
}

input {
  padding: 5%;
  font-size: 20px;
  text-align: center;
  border-radius: 10px;
  border: 3px solid violet;
}

html css centering

<div id="siteInfo">
   <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
        <span>132321</span><br />
   <input value="Test" \>
</div>

Why Inline-block doesn't work properly in this CSS?

This is actually expected behavior in HTML. Because you are using inline-block, any newline character or whitespace you have after the element and before another inline element, will be counted as a space. If you want the blocks to stack side by side like in your picture, your HTML would need to be like this.

<div class="rex">
    <div class="ex"></div><div class="ex2"></div><div class="ex3"></div>
</div>

working demo

It's not very pretty, but then again, I would recommend using another approach, possibly floating the elements instead.

Refer to here for a more in depth explanation of why this occurs.

How to remove the space between inline-block elements?

Width of element with 'white-space: nowrap' doesn't adjust to child content

Add this line to .pane

display: inline-block;

Child div causes parent div to occupy whole page width

Not entirely sure why you made such simple design into complicated HTML/CSS. But in general you can set the container to display: inline-block as it has the shrink-to-fit feature. Example below without any markup changes.

Don't set .content to absolute position. As if a container contains nothing but absolute positioned elements, it will collapse to nothing, only if you give it some size, but it will not be aware of the content inside, which means the box size cannot be dynamic.

.filled-no-icons {  position: relative;  display: inline-block;  height: 36px;  line-height: 36px;  padding: 0 10px;  color: #fff;}
.filled-no-icons .rectangle-3 {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  border-radius: 4px;  background-color: rgba(0, 150, 136, 255);}
.filled-no-icons .content {  position: relative; /* increase stacking order */}

<div class="filled-no-icons">  <div class="rectangle-3"></div>  <div class="content">    <div class="label">Button</div>  </div></div>
<div class="filled-no-icons">  <div class="rectangle-3"></div>  <div class="content">    <div class="label">Lorem ipsum dolor sit amet</div>  </div></div>

Align divs horizontally and perfectly fit the width of parent

The problem is with inline-block display style. It adds white-space between your elements.

Elements in the inline formatting context will cause white spaces from carriage returns and white-spaces in your HTML

quote from a comment to another question here on StackOverflow : inline-block

I also suggest you don't use fixed px width on the child elements. But use percentage. That way you are sure they will always stay 4 on one row.

FlexBox is the way to go when styling your layout. It's very easy to use and understand. Check here the docs -> FlexBox

That being said, check snippet below

.parent {  display:flex;  flex-wrap:wrap;  flex-direction:row;}.child {  flex: 0 25%;  height:100px;  background:red;  border:1px solid green;  box-sizing:border-box;}

<div class="parent">  <div class="child">
  </div>  <div class="child">
  </div>  <div class="child">
  </div>  <div class="child">
  </div></div>

Display inline causing element to be pushed further down

This is related to margin collapsing - your img and the h2 below it have margins that "touch" each other, but for block elements margins collapse (merge into one), while for inline elements they do not and they both apply, hence the additional space.

Check this article - http://www.howtocreate.co.uk/tutorials/css/margincollapsing

---

Related Topics