100% ширина расширяет прошлый родительский элемент

Question

Я использую HTML и CSS для кодирования карточной кнопки.

По какой-то причине width текста под изображением всегда проходит мимо края родителя div.

Я могу настроить, чтобы сделать его относительно незаметным при просмотре на рабочем столе, но это становится настоящей болью, когда дело доходит до просмотра на мобильных устройствах.

.card { 
 
    width: 20%; 
 
    box-shadow: 0px 0px 10px gray; 
 
} 
 
.card:hover { 
 
    box-shadow: 0px 0px 20px black; 
 
} 
 
.card-img { 
 
    width: 100%; 
 
} 
 
.card-title { 
 
    margin: 10px; 
 
    display: inline-block; 
 
    font-family: Open Sans; 
 
    text-align: center; 
 
    width: 100%; 
 
}

<div class="card"> 
 
    <img class="card-img" src="http://prww-weather.com/logo.png" /> 
 
    <p class="card-title">Card Title</p> 
 
</div>

Кто-нибудь знает, почему card-title проходит мимо края card и как я могу это исправить?

Я думаю, что это что-то делать с inline-block присвоенного card-title класса, но если я не включаю, что в margin х card-title и card-img коллапсу.

Answer 1

Вы можете попробовать это:

https://jsfiddle.net/nbLLgx5x/

.card { 
 
    width: 20%; 
 
    box-shadow: 0px 0px 10px gray; 
 
} 
 

 
.card:hover { 
 
    box-shadow: 0px 0px 20px black; 
 
} 
 

 
.card-img { 
 
    width: 100%; 
 
    display: block; 
 
} 
 

 
.card-title { 
 
    padding: 10px; 
 
    font-family: Open Sans; 
 
    text-align: center; 
 
    margin: 0; 
 
}

<div class="card"> 
 
    <img class="card-img" src="http://prww-weather.com/logo.png" /> 
 
    <p class="card-title">This is a very long card title</p> 
 
</div>

Answer 2

Использование padding и border-box

.card { 
 
    width: 20%; 
 
    box-shadow: 0px 0px 10px gray; 
 
} 
 
.card:hover { 
 
    box-shadow: 0px 0px 20px black; 
 
} 
 
.card-img { 
 
    width: 100%; 
 
} 
 
.card-title { 
 
margin: 0; 
 
    padding: 10px 0; 
 
    display: inline-block; 
 
    font-family: Open Sans; 
 
    text-align: center; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
}

<div class="card"> 
 
    <img class="card-img" src="http://prww-weather.com/logo.png" /> 
 
    <p class="card-title">Card Title</p> 
 
</div>

Answer 3

Это потому, что у вас есть margin применяется, когда вы должны использовать padding

(margin s являются для космического пространства, padding s предназначены для внутренней пространство, так как ваш .card-title является ребенком и вам нужно некоторое пространство вокруг него, но не более, чем родитель, padding на помощь).

Но поскольку вы сейчас используете padding вам нужно box-sizing получить width вычисленный право в отношении box-model.

Также вы можете установить display:block в свой img, чтобы устранить брешь.

Большая статья о box-sizing

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
.card { 
 
    width: 20%; 
 
    box-shadow: 0px 0px 10px gray; 
 
} 
 
.card:hover { 
 
    box-shadow: 0px 0px 20px black; 
 
} 
 
.card-img { 
 
    width: 100%; 
 
    display:block 
 
} 
 
.card-title { 
 
    padding:5px 10px; 
 
    display: inline-block; 
 
    font-family: Open Sans; 
 
    text-align: center; 
 
    width: 100%; 
 
    margin:0; 
 
    border:1px solid red 
 
}

<div class="card"> 
 
    <img class="card-img" src="http://prww-weather.com/logo.png" /> 
 
    <p class="card-title">Card Title</p> 
 
</div>

Answer 4

Это все из-за края: 10px, что вы назначили для карт-заголовка. Это будет потреблять 100% родительской ширины + 10px слева и 10px по правому

Чтобы иметь водосточное пространство вокруг карты-заголовок и ограничить его в родительских пределах, используйте для карт-заголовка, и Включите свойство box-sizing: border-box; на всех элементах.(Граница-бокс позволит отступы, границы следует рассматривать как часть самой ширины элемента)

* { 
 
    box-sizing: border-box; 
 
} 
 
.card { 
 
    width: 20%; 
 
    box-shadow: 0px 0px 10px gray; 
 
} 
 
.card:hover { 
 
    box-shadow: 0px 0px 20px black; 
 
} 
 
.card-img { 
 
    width: 100%; 
 
} 
 
.card-title { 
 
    padding: 10px; 
 
    display: inline-block; 
 
    font-family: Open Sans; 
 
    text-align: center; 
 
    width: 100%; 
 
}

<div class="card"> 
 
    <img class="card-img" src="http://prww-weather.com/logo.png" /> 
 
    <p class="card-title">Card Title</p> 
 
</div>

Answer 5

Вашей проблемой здесь является сочетанием width: 100%; и margin: 10px;

Проще говоря вы карта название будет принимать ширину вашей карты и также будет дополнительная шириной от вашего края (здесь 2 * 10 = 20px), и это, наконец, будет шире, чем ваш родительский элемент (карта), поэтому ваш текст будет сосредоточен в названии карты, но сам титул карты будет перемещен вправо на 10 пикселей здесь.

Здесь вы должны использовать отступы вместо поля. Быстрое напоминание о том, как эти 2 работы (кредит John Boker's answer):

Маржа находится снаружи элементов блока, а прокладка внутри.

• Используйте запас, чтобы отделить блок от вещей вне его
• Используйте отступы переместить содержимое от краев блока.

Вот изображения, объясняет это хорошо из https://www.impressivewebs.com/width-100-percent-css/: